Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Create a Drag & Drop File Uploader For Websites to your Wishlist.

Add to Wishlist

Create a Drag & Drop File Uploader For Websites

Add a nicely designed drag and drop file uploader to any website including your own online learning platform!
5.0 (7 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
150 students enrolled
Last updated 4/2016
$15 $50 70% off
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

Have you ever wondered how Udemy created their great file uploader for instructors? This course shows you how to build your own file uploader with the advanced feature of drag and drop uploading.

In this course you will learn how to set up your upload server, set the style of your upload page, display an upload progress bar, and write the JavaScript code to make it all come together.

Technical Description

Create a multiple file uploader using the HTML5 Drag & Drop API, with a multiple file selection if not supported. You'll create a reusable JavaScript AJAX uploader that works with any backend language that can upload files and output JSON, although we'll be using PHP here. Finally, we'll pull this all together by using the reusable uploader code to output which files have been uploaded and which ones failed.

Technologies and Languages Used

  • PHP
  • JavaScript
  • AJAX
  • CSS
  • HTML5

Real World Uses

This file uploader can be used in creating an online learning platform like Udemy or on any other type of website in which file uploads are important. Learning this skill we keep you head and shoulders above the rest of the web dev flock.

Who is the target audience?
  • Web developers
  • Web designers
  • Entrepreneurs
Students Who Viewed This Course Also Viewed
What Will I Learn?
Set up a file upload and display server
Create and style your own file uploader
Add a drag and drop functionality to your file uploader
Choose which files to accept and which to deny.
Display uploaded files
View Curriculum
  • A free code editor
  • Access to a server
Curriculum For This Course
Expand All 12 Lectures Collapse All 12 Lectures 01:53:34
Introduction to the Course
1 Lecture 06:29

The quick introduction to the course

Files can be downloaded here.

Preview 06:29
Creating a Udemy Style Drag and Drop File Upload System
9 Lectures 01:46:32

Let us start creating our drop file upload system by getting the server ready.

Preview 03:04

Here we shall check the styling options we have.

Preview 27:38

This time students will learn how a drag and drop hook works.

Drag and Drop Hook

The creation of an upload hook will be discussed here.

Form Upload Hook

Here we will learn how to upload remotely.

Backend Upload

Working with JavaScript uploads

JavaScript Upload Part 1

More on JavaScript uploads.

JavaScript Upload Part 2

Working with the progress bar.

Progress Bar

Working with processed files.

Showing Processed Files
2 Lectures 00:35

Thanks for taking the course!


Request a Course
About the Instructor
4.2 Average rating
11,084 Reviews
228,171 Students
185 Courses
220,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 370,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.

Report Abuse