Disclaimer : In this post I am just showing the drag-drop feature, the upload part is totally depends on you that how you want to do it.
So, fist we need to make a drag-drop-area where files can be dropped. I have used a very general design you can use your creative designs.
The drag drop area should have a
<input type="file" hidden> and a
<button>Browse Image</button>, keep the file-input hidden so that it doesn't interfere in the design and the button will be visible to use the general file select feature.
There will be 3 design for each event "
The drag leave will be a simple one which will be the initial design.
The drag over design will be activated when someone drag over the area.
The drop design will be depending on what you are making upload, like here I am uploading images so a preview of image is shown if you are working with documents you can show filenames with default icons.
Each design will be contained in a class and classes will be added and removed on events using java script.
Then, `let file;' be a variable this will store our file data
Then, create a function which will check button press and file change and will work when someone just use the select file button instead of drag drop
Then create three functions with
.ondropand change the classList accordingly, also use preventDefault(); to prevent the page to open the image or file in browser
*The on drop event have a object called
dataTransfer inside this object you can access files to select the first file write
event.dataTransfer.files; and equal the file variable to it
file = event.dataTransfer.files;
*Here, I am creating a
showImage() function you can do what ever you want with the file.