How to make your website have Drag and Drop Files

Have you had seen an application in your computer where you need to upload a file? And instead of clicking it you just open your folder and drag and drop it in the place and i suddenly accepts it?

And now that you are a making your project you want to implement it but how?

This is How to do it:

Making the input When making an input make sure to have label in it, Because the label is the one who are gonna be seen and we are gonna hide the input in this tutorial

Make sure that the input has a hidden as a prop if you want the labels to be used and now show the inputs

Design The Label if you want to have some sort of design then you can go design the label or even the input if it does not contain hidden in your code

this is my design and yes im bad at designing LOL

Lets Make the necessary function

handleFileChange - This is Responsible for the onChange Event of the files even though its hidden. this is what you will use as default without drag and drop.

handleDrop - This is Responsible for the drop files by the users.

handleDragOver -This is Responsible for preventing the default behaviour of the web when you drop files in the input.

This 3 function is necessary for handling the file input of the user whether they use click and just pick the files or Drag and Drop.

Lets now use the function in label and input

Label

onDragOver and Will use handleDragOver function

onDrop and will use the handleDrop function

Input

onChange and will use handleFileChange function

Now The code is finish isn't it easy?

Conclusion You probably see this kind of features in most application as it is now requirement for application because of how easy it is to implement and also how it can make your website more user friendly this features is great it is both easy and necessary for all web application that will handle file and also photos.

I hope you learn something new and i hope this article helps you