Learn to build a drag and drop file uploader for your website, featuring upload progress bars and reusable AJAX code, ideal for online learning platforms.
This course teaches you to build a cool drag and drop file uploader for your website, just like the pros at Udemy! You’ll learn how to set it up, style it, and make it user-friendly with some JavaScript magic.
Add a nicely designed drag and drop file uploader to any website including your own online learning platform!
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.
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
1 Lectures
9 Lectures
1 Lectures
1 Lectures
At Stone River eLearning, technology is all we teach. If you're interested in IT, programming, development, business or soft skills - we have it covered. Check out our huge catalog of courses and join the over 3.2M students currently taking Stone River eLearning courses. We can provide all or part of this catalog to any business via API connection, or...
Useful course of how to upload multiple files, clever and a good explantion and clever.
This course appears to have been abandoned by the instructor. Questions are note getting answered.
Great Course
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!
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.
One of the most valuable course i´ve taken
Very good and clear explanations. You know why and how we have to do things.
Your email address will not be published. Required fields are marked *
Paul K.
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.