Create a Drag & Drop File Uploader For Websites
4.7 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
258 students enrolled

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!
4.7 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
258 students enrolled
Last updated 7/2020
English
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
11 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 2 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 13 lectures 01:53:48
+ 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:33

Thanks for taking the course!

Conclusion
00:13
Request a Course
00:20
+ Bonus Material
1 lecture 00:13
Bonus Lecture: Course Discounts
00:13
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 this course is for:
  • Web developers
  • Web designers
  • Entrepreneurs