This tutorial shows how to drag and drop files in Javascript for a file input. You can drag n drop just one or multiple files at once. You will learn about the drag n drop events to listen for and how to use them to indicate your drop area is active and to receive the files. This tutorial expands on lessons from my 8 hour Javascript full course video found here: th-cam.com/video/EfAl9bwzVZk/w-d-xo.html
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!
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
@@DaveGrayTeachesCode Thanks Dave, I love little challenges and I was thinking if it's possible to include some in the video so we can fork the source code and work on it Regards
@@ahmad-murery good idea. I'm not sure about doing that on YT because so many are at different skill levels. However, I will do that when I design a course and make it available on another platform. I plan to do that after reaching 10k subs 👍 Goals! 🚀
@@ahmad-murery thank you! I was thinking about your request and was working on a larger tutorial today. I usually have some recommendations of more features to add at the end of these longer ones, too. Thanks again!
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 ;-)
Good question! addEventListener() is a function. Without getting into a full scope discussion, I prefer to avoid the global scope so I make a habit of calling my initApp function there after the DOM is loaded. Much like listening for DOMContentLoaded, defer delays processing of the Javascript until the HTML has been parsed. If you only wanted to use defer, you could call a function like initApp in the global scope, and the HTML elements would be available. Also note, defer is implied if you use type="module" as an attribute in the script tag.
That's a great question! While calling the initApp() function in the global scope should work, I always prefer to listen for the DOMContentLoaded event or the ready.state. An addEventListener() is a function, and therefore, I'm not calling my initApp in the global space. I also consider it a good habit, but that's just my opinion. 😀 Thanks for asking! 🙏💯
@@DaveGrayTeachesCode Thanks for the immediate anwer, very kind from you. And of course thanks for all the great videos that you are putting on TH-cam. You really should have many more subscribers. 👍👍👍
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!
I did make a TinyJPG clone video after this one that uses this to upload to a serverless function. It really depends on what you are saving the files to. For example AWS would be different than your own server or another storage service.
Events are often implicitly provided to event handlers through event listeners. This means an event listener can simply name the function to be called when the desired event occurs without passing in the event. The function will receive the event automatically.
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.
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...
The follow up tutorial to this one shows what I did - which is send the file to a serverless function - but you could be sending it anywhere: th-cam.com/video/jEjo9UytpIc/w-d-xo.html
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
You should be achieving that goal with this tutorial. I'm not sure where or why you are stuck? To see a project I implemented this file drag n drop for upload, check out this project tutorial where I upload images to be compressed: th-cam.com/video/jEjo9UytpIc/w-d-xo.html
@@DaveGrayTeachesCode Wow that was a quick response for sure! Man that's dedication So my idea is that you hover over the area which gets highlighted just like in the video after which you let go and the javascript puts the file into a HTML from which I have a working PHP code to upload it I'll definitely check out that video and once again awesome work and thank you so much ! Love from Hungary
This tutorial shows how to drag and drop files in Javascript for a file input. You can drag n drop just one or multiple files at once. You will learn about the drag n drop events to listen for and how to use them to indicate your drop area is active and to receive the files. This tutorial expands on lessons from my 8 hour Javascript full course video found here: th-cam.com/video/EfAl9bwzVZk/w-d-xo.html
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!
Glad it helped! And I can relate to exactly what you are saying. I refer to MDN daily the various APIs, events, and more. Too much to remember it all.
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!!!!
Thank you very much! 🙏
You are easily the best web dev teacher on TH-cam!
Thanks for the kind words Jeremiah. 🙏 💯
Thanks You for such nice tutorials these videos are very helpful to us to learn and excel in Javascript. ❤
Thanks! I was confused by the explanation on MDN and your tutorial made it clear.
Glad it helped!
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
Great observations and research Ahmad! I'm glad I'm making you try hard. You always rise to the challenge! 💯🚀
@@DaveGrayTeachesCode Thanks Dave,
I love little challenges and I was thinking if it's possible to include some in the video so we can fork the source code and work on it
Regards
@@ahmad-murery good idea. I'm not sure about doing that on YT because so many are at different skill levels. However, I will do that when I design a course and make it available on another platform. I plan to do that after reaching 10k subs 👍 Goals! 🚀
@@DaveGrayTeachesCode Fair enough,
I hope you reach 10k subs very soon,
@@ahmad-murery thank you! I was thinking about your request and was working on a larger tutorial today. I usually have some recommendations of more features to add at the end of these longer ones, too. Thanks again!
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 ;-)
Good question! addEventListener() is a function. Without getting into a full scope discussion, I prefer to avoid the global scope so I make a habit of calling my initApp function there after the DOM is loaded. Much like listening for DOMContentLoaded, defer delays processing of the Javascript until the HTML has been parsed. If you only wanted to use defer, you could call a function like initApp in the global scope, and the HTML elements would be available. Also note, defer is implied if you use type="module" as an attribute in the script tag.
A question: why are you using the event listener on "DOMContentLoaded" when you have already used defer? Don't they do the same thing?
That's a great question! While calling the initApp() function in the global scope should work, I always prefer to listen for the DOMContentLoaded event or the ready.state. An addEventListener() is a function, and therefore, I'm not calling my initApp in the global space. I also consider it a good habit, but that's just my opinion. 😀 Thanks for asking! 🙏💯
@@DaveGrayTeachesCode Thanks for the immediate anwer, very kind from you. And of course thanks for all the great videos that you are putting on TH-cam.
You really should have many more subscribers. 👍👍👍
@@marcod.643 thank you for the kind words!
Nice! But if a need to modify, and add some properties to the File object, How can I do it?
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!
amazing tutorial, thanks bro
Awesome as always 👍😀
Thanks again!
Great Video!
Thanks! 🙏
Do you have next part of the video? Meanin, how we can save the files we just uploaded in this video?
I did make a TinyJPG clone video after this one that uses this to upload to a serverless function. It really depends on what you are saving the files to. For example AWS would be different than your own server or another storage service.
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 ?
thank you so much it helped me a lot
That is great! You're welcome, and thank you for the note. 💯
Thank you so much
You're welcome! 💯
How is ‘e’ getting passed to handleDrop? Does eventLister set the param? Thanks
Events are often implicitly provided to event handlers through event listeners. This means an event listener can simply name the function to be called when the desired event occurs without passing in the event. The function will receive the event automatically.
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.
Thanks Michael! MDN is a great reference 👍
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...
The follow up tutorial to this one shows what I did - which is send the file to a serverless function - but you could be sending it anywhere: th-cam.com/video/jEjo9UytpIc/w-d-xo.html
i want the dragged file as the input type file
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
You should be achieving that goal with this tutorial. I'm not sure where or why you are stuck? To see a project I implemented this file drag n drop for upload, check out this project tutorial where I upload images to be compressed: th-cam.com/video/jEjo9UytpIc/w-d-xo.html
@@DaveGrayTeachesCode Wow that was a quick response for sure! Man that's dedication
So my idea is that you hover over the area which gets highlighted just like in the video after which you let go and the javascript puts the file into a HTML from which I have a working PHP code to upload it
I'll definitely check out that video and once again awesome work and thank you so much ! Love from Hungary
Great tut
Thanks!