Drag and Drop File using Javascript

#html #css #javascript #webdev

Hello everyone, today I'll show you how to use HTML, TailwindCSS, and Javascript to construct a drag-and-drop file upload. I will highlight the key ideas here, and the code, together with code comments, will be made available at the end of the blog.

Let's get started...

Main Things about this Drag and Drop Component -

It has 3 validations - File type should be either image or pdf, the File size should be less than 5 MB and It is a must to select at least 1 file.
The file selected will show 4 features - File name, Size, Type, and a delete button. To delete the file and select another file.
All the functions and methods are separately created for better code structure and readability.
Validation of file type/size and adding a file is done inside "drop" event listener.
Validation of "No files selected" is done inside the "click" of "Next" button.
There is an input button "Select a file" which is used to select the file manually instead of dragging and dropping.
The logo of the file changes according to the file type whether it is an image or pdf file.