Drag and Drop File using Javascript

Read Time:1 Minute, 26 Second

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…

  • 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.

THANK YOU FOR CHECKING THIS POST
You can contact me on –
Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email – [email protected]

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ –> https://www.buymeacoffee.com/waaduheck <–

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Source: https://dev.to/shubhamtiwari909/drag-and-drop-file-using-javascript-2h99

WP Ad Inserter plugin for WordPress