Drag & Drop or Browse - File Upload Tutorial using HTML CSS and JavaScript

Using drag and drop we can upload files easily over the internet. Browse files was the old feature and exits everywhere. Today we are going to learn how to create drag & drop feature as well as browse files to upload files.

Don't forget to Like, Share, Comment and Subscribe to my channel for more javascript projects.

GET Source Code :

Timestamps :
00:00 Intro & Demo
02:34 Project Setup
04:37 Adding HTML
06:22 Adding CSS
13:57 Adding JavaScript
35:25 End

Our Previous Videos :
➔ Twitter Clone using HTML and CSS - Beginners Tutorial

➔ Responsive Netflix Clone using HTML and CSS - Beginners Tutorial

➔ Instagram Reels Clone using HTML & CSS - Beginners Tutorial

➔ TikTok Clone With HTML and CSS - Beginners Tutorial

➔ Responsive Facebook Clone using HTML & CSS - Beginners Tutorial

You can find me on:

[bimalpandey]

21:55 I think you should use dragstart instead of dragover to change inner text of dragText, since dragover runs multiple times while dragstart runs only once. Great vid ❣

[Bley_]

thank you for the tutorial, is there a template for this so I can edit it. I am still new to this. Thank you!

[anlozselgin]

Am I missing something? You didn't bind dragged file to input element.

[blackster]

Thanks for the tutorial, really well made!

[lightbeatproduction]

hello, I am having problems with the last part, my the "input.click();" is not opening the file explorer, I have tried multiple ways and still no success. anyone having the same issue?

[bagastarangga]

How to change image after you have selected image?

[rithwikkrishna.]

great content man it was a lifesaver. Thank you.

[vvsyashaswini]

What if I want to display filename after drag and drop

[AmirAli-jkkr]

your videos are amazing! Can you please do JS videos as a follow on to your twitter/google/fb html and css videos pls

[Jasmine-zgox]

in the drag and drop, when i drop the image it doesnt show and give me error fileURL not found
can anyone help?

[ShotYoNer]

hey man. i need some help with the script

[chanapapantong]

Can you give me some advice on how to do drag and drop with multiple files, thank you..

[ShotYoNer]

why i have problem here:
input.addEventListener('change', function () {

[tauqeerahmed]

Bro plz make tutorials of making websites using Html, Css and JavaScript..That would be helpful for us...your teaching style is very understandable...thank you..

Note - Voice Overs only..its a humble request.

[semicolon]

what if i use file format like docx, pdf and zip, not an image. how can i do that?

[ashleyalt]

can you please share the source code for free? I need it for a school project

[_delfinofahrezaakbar]

This vid is realy good but can you make other video like this to integrate the js to the php to save the image to local folder and store the url to the mysql database 👍.

[sbmahapatra]

Where the file will go from the drop box? I mean to say what is the upload path?

[CodeWithClinton]

You did a great job. Thank you so much. 💙💙🙏

[ClipHypeBuzzMoments]

How can we drag and drop pdfs as well and rather than showing the image and just show file name and type.