Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript

Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript

Short Definition:
Drag and Drop file upload means you can upload the file by drag & drop. Drag and Drop interfaces enable web applications to drag and drop files on a web page. In this video, I have shown how you can upload the file by drag & drop or by clicking on the browse file button.

Timestamps:
0:00 Demo of Drag & Drop
1:24 HTML & CSS Start
4:00 JavaScrip Start
4:56 Drag & Drop Code Start
17:57 Browse File Button Code Start

Music Credit:
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.

Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)

ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.

[CodingNepal]

I have tried to explain each JavaScript line with comments... Hope you understand!!

[TheTurtleMan]

coding nepal i love your all videos really i appericate of all over tutorial course, i understood from this channel programming

[jackwalker]

The man who actually know the real use of javascript 😍😍🔥🔥
I made projects by watching your channel and the other one is @Florin Pop channel.

[elieli]

Merci beaucoup pour vos efforts monsieur, c'est très apprécié par les gens qui commencent la longue route.

[ia_galuhachmadfauzan]

can you change the file type to excel and if you can can you tell me how?

[quangtran]

Thanks for all, It is easy to understand

[anvarzaripboyev]

Excellent, thanks for what you are doing !!!
Let the next video be about “Parallax effect pure JavaScript”.

[linkcl]

When displaying the image the input is lost, how can I keep it to publish by button?

[skygrace]

Thanks for the tutorial, so please let next about multiple upload with preview, delete and add button

[mukeshlekhrajani]

Awesome !!

Keep up the good work...

[sagittalyrae]

Hi..!!.. How can i link the Input to a php script to upload the image on a server..??.. I named the input to link it to a php variable but it don't works :c

[SonNguyen-rbut]

I want to send that image to server. How can i do it when don't have input tag. Thank you for reading my question. 😘😘

[eliashayar]

hello thanks alot for this video, im trying to do similar thing for my senior project, i was wondering if i want to insert more than one file, is it possible ?

[cristhianzamalloa]

Thank you very much. The best explanation that I've found. Really good.

[minzcode]

That's great. It was very helpful.

[cheribongbong]

Can I put the file name in this like the video 'Preview Image before upload'?
I want to make it by applying two videos.

[Henry_Nunez]

When you drag and drop the file is it left in a download folder?

[HabiburRahman-fwvr]

That's great. It was very helpful.💕❤️

[alanthapa]

is it work for videos too or not ??? if not plz make one how to upload video file in db

[mukulchaudhary]

how do we validate that on drag and drop the file/attachment is successfully loaded in our input filed which is hidden, because we need to send data to the server or need to other stuff