How to Drag and Drop Files with Javascript | Vanilla Javascript Drag n Drop File Input

Learn how to Drag and Drop Files with Javascript in this tutorial. We'll create a file input that will allow you to drag n drop multiple files at once for file input on an HTML page using Vanilla Javascript.

How to Drag and Drop Files with Javascript | Vanilla Javascript Drag n Drop File Input

(0:00) Intro
(1:05) HTML Structure
(3:41) Applying CSS Styles
(4:34) JavaScript Functionality

✅ Follow Me:

Was this tutorial about how to drag and drop files with Vanilla JavaScript helpful? If so, please share. Let me know your thoughts in the comments.

#drag #drop #javascript

[konstantinospascal]

I remember being so overwhelmed by what i thought was "javascript" at start, then i realized the difference between the language itself and the countless WebAPI's. I never knew about FileList and File objects, that's really neat! Great video!

[jeremiah]

You are easily the best web dev teacher on YouTube!

[VitoOnYoutube]

Thank you so much for all your great videos!
You are calm, extremely clear and structured. Highly enjoyable.
I wish you a ton more subs!!!!

[ahmad-murery]

Hello Dave,
I was trying hard to find something I could comment about especially after seeing the comment by Marco D.
But finally I found one 😎
I was suspicious about the need for calling preventDefault for all drag events, so, I looked into the MDN and found the following information about the default actions for these events:

*dragenter*: Will reject immediate user selection as potential target element (no need to worry about)
*dragleave*: none
*dragover*: Reset the current drag operation to "none" (this something we need to prevent)
*drop*: Varies (whatever it is, we need to prevent it)

Conclusion: We can achieve the same result by just preventing default on both dragover and drop events.
I know it's not harmful to have the other ones but at least knowing why and when to use them gives me more confident about the code.

Thanks Dave, you're awesome

[ashlok]

Thanks You for such nice tutorials these videos are very helpful to us to learn and excel in Javascript. ❤

[tarabario]

Thanks! I was confused by the explanation on MDN and your tutorial made it clear.

[giuliocasa]

Little technical question: which is the difference between defer and DOMContentLoaded? You say that we put defer to make sure that the DOM has loaded and we can work with the elements of the DOM: it looks pretty much the same as DOMContentLoaded, doesn't it? But you still need to listen to that event! So which is the subtle difference? Thank you for your simple and clear explanation ;-)

[tillwill]

Dave I have a question regarding Javascript drag and drop. When i drag a div what happens is that i drag a slightly transparent copy of this div while the original div remains at the starting position. I wanna somehow make it so that when i start dragging a div there is no copy of the div and the full opacity div follows my mouse cursor immedediately. I hope you understand what I mean. I couldnt figure out how this is done, maybe you can help me. Thanks for your videos anyways, are always great!

[Nomadev]

Nice! But if a need to modify, and add some properties to the File object, How can I do it?

[sbmahapatra]

Do you have next part of the video? Meanin, how we can save the files we just uploaded in this video?

[BradInSanDiego]

How is ‘e’ getting passed to handleDrop? Does eventLister set the param? Thanks

[johnc]

what if i insert one file and then insert another file. Will the array consist of two files ? or it will refresh and shows only one file ?

[ma-ezzh]

The best part of your tutorials is they almost always start from absolutely nothing! The only thing would improve the tutorials for me is providing a link to MDN or other documentation for what is in your tutorials because for some reason I have to read something as well as watch videos on it to understand it.

[marcod.]

A question: why are you using the event listener on "DOMContentLoaded" when you have already used defer? Don't they do the same thing?

[MrAhmed]

I appreciate the tutorial Dave but it would have been nice if you at least showed us how to save the dropped file into a folder or something so we can have an idea of what to do next...

[naveentyagifit]

i want the dragged file as the input type file

[falcy]

Awesome tutorial, but man I'm stuck as hell....
What I'm trying to achieve is when I hover over and let go of the file it would be put into a input file from which I can hit upload and done