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 (5 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.
136 students enrolled
$50
Take This Course
  • Lectures 12
  • Contents Video: 2 hours
    Other: 1 min
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2014 English

Course Description

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.

What are the requirements?

  • A free code editor
  • Access to a server

What am I going to get from this course?

  • 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

What is the target audience?

  • Web developers
  • Web designers
  • Entrepreneurs

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to the Course
06:29

The quick introduction to the course

Files can be downloaded here.

Section 2: Creating a Udemy Style Drag and Drop File Upload System
03:04

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

27:38

Here we shall check the styling options we have.

10:41

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

04:11

The creation of an upload hook will be discussed here.

14:55

Here we will learn how to upload remotely.

13:35

Working with JavaScript uploads

11:23

More on JavaScript uploads.

06:51

Working with the progress bar.

14:14

Working with processed files.

Section 3: Conclusion
00:13

Thanks for taking the course!

Request a Course
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 180,000+ Happy Udemy Students | 320,000+ Students Worldwide

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 320,000 students currently taking Stone River eLearning courses. We currently offer 125+ 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.

Ready to start learning?
Take This Course