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.45 (25 reviews)

Udemy

platform

English

language

Web Development

What you will 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

Why take this course?

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.

Screenshots

Create a Drag & Drop File Uploader For Websites - Screenshot_01

Create a Drag & Drop File Uploader For Websites - Screenshot_02

Create a Drag & Drop File Uploader For Websites - Screenshot_03

Create a Drag & Drop File Uploader For Websites - Screenshot_04

Reviews

Paul

October 9, 2021

This course uses the dataTransfer.files API which isn't available in Safari (and isn't coming to iOS anytime soon) so you basically can't use what you learn on this course in a production environment.

Boris

June 4, 2017

I do like the course. Explanations are clear and very detailed. Voice and language are understandable. During the development the author constantly checks the process with console; shows result of each step; makes mistakes and corrects them... All that makes the understanding of the process clearer. One really minor note I have is that the author at some point is too much detailed. Specifically at the building HTML of uploaded form. I think everyone, who is interested in the course, will already know how to build basic HTML form. But this note is minor and can't be reason for any downgrade. Great course!

Gareth

October 27, 2016

Excellent course! The instructor explains everything clearlly in a way thats easy to understand. You learn how to make an interesting webpage element. I found it very exciting.

Charts

Price

Rating

Enrollment distribution

Create a Drag & Drop File Uploader For Websites - Distribution chart