Sometimes, we want to drag-drop files into standard HTML file input and JavaScript.
In this article, we’ll look at how to drag-drop files into standard HTML file input and JavaScript.
How to drag-drop files into standard HTML file input and JavaScript?
To drag-drop files into standard HTML file input and JavaScript, we add a div to drop the files into.
For instance, we write
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border: 1px solid black; height: 100px">
Drop Here
</div>
Should update here:
<input type="file" id="fileInput" />
</body>
</html>
to add a div and a file input.
Then we write
dropContainer.ondragover = dropContainer.ondragenter = (evt) => {
evt.preventDefault();
};
dropContainer.ondrop = (evt) => {
fileInput.files = evt.dataTransfer.files;
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
dT.items.add(evt.dataTransfer.files[3]);
fileInput.files = dT.files;
evt.preventDefault();
};
to stop the default behavior on the div with
dropContainer.ondragover = dropContainer.ondragenter = (evt) => {
evt.preventDefault();
};
Then we get the files on drop with dropContainer.ondrop
.
We get the files with evt.dataTransfer.files
.
We add the files intoi the DataTransfer
with dT.items.add
.
Then we put the files into the file input with fileInput.files = dT.files;
.
Conclusion
To drag-drop files into standard HTML file input and JavaScript, we add a div to drop the files into.