How to add JS Drag-&-Drop file upload without any dependencies
Problem:
For your new web application, you want to add drag&drop file uploads without using any external library.
Solution
You can use this set of functions, which you can adapt to your application.
/**
* Initialize drag & drop event handling for a DOM element.
* The DOM element does not have to be empty in order to do this.
* @param elem The DOM element where files can be dragged & dropped
* @param callback The callback(files) function that gets passed a list of files
* when files are dragged and dropped.
*
* Basic usage example:
* var elem = document.getElementById('mydiv');
* initializeDragAndDrop(elem, function(files) {
* for (var i = 0; i < files.length; i++) {
* // Do something with files[i]...
* handleUploadedFile(files[i]); // Replace by your code
* }
* });
*/
function initializeDragAndDrop (elem, callback) {
elem.addEventListener('drop', function (event) {
_dragndrop_preventDefault(event);
callback(event.dataTransfer.files);
}, false);
elem.addEventListener('dragover', _dragndrop_preventDefault, false);
elem.addEventListener('dragdrop', _dragndrop_preventDefault, false);
elem.addEventListener('dragenter', _dragndrop_preventDefault, false);
elem.addEventListener('dragleave', _dragndrop_preventDefault, false);
}
/**
* Internal utility function to prevent default
* handling for a given event.
*/
function _dragndrop_preventDefault (event) {
event.stopPropagation();
event.preventDefault();
}
Usage example:
var elem = document.getElementById('mydiv');
initializeDragAndDrop(elem, function(files) {
for (var i = 0; i < files.length; i++) {
// Do something with files[i]...
handleUploadedFile(files[i]); // Replace by your code
}
});
Note that you need to run initializeDragAndDrop
only after the respective DOM element (mydiv
in this example) has been loaded. For example, you could call it like this if you use jQuery:
$(document).ready(function() {
initializeDragAndDrop(/* ... */);
});
Pure Javascript (no jQuery):
// WARNING: This will replace any window.onload function
// that is currently set.
// Also, this will only fire after everything on the page
// has been loaded, which might not be the desired behaviour.
window.onload = function() {
initializeDragAndDrop(/* ... */);
};
Also see this previous TechOverflow post on how to read the uploaded files into memory, if you need to.