Create a Drag & Drop File Uploader For Websites
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.
160 students enrolled
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.
160 students enrolled
Last updated 2/2017
English
Learn Fest Sale
Current price: $10 Original price: $50 Discount: 80% off
21 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • A free code editor
  • Access to a server
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.

Who is the target audience?
  • Web developers
  • Web designers
  • Entrepreneurs
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 14 Lectures Collapse All 14 Lectures 01:54:46
+
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
10:41

The creation of an upload hook will be discussed here.

Form Upload Hook
04:11

Here we will learn how to upload remotely.

Backend Upload
14:55

Working with JavaScript uploads

JavaScript Upload Part 1
13:35

More on JavaScript uploads.

JavaScript Upload Part 2
11:23

Working with the progress bar.

Progress Bar
06:51

Working with processed files.

Showing Processed Files
14:14
+
Conclusion
2 Lectures 00:35

Thanks for taking the course!

Conclusion
00:13

Request a Course
00:22
+
Bonus Material
2 Lectures 01:17
Bonus Lecture: Certificate of Completion
01:03

Bonus Lecture: Course Discounts
00:14
About the Instructor
Stone River eLearning
4.3 Average rating
13,719 Reviews
247,905 Students
195 Courses
240,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.