I'm working on a drag & drop file uploader that can be triggered by clicking the label, or dropping a file on the label.
The input field has a jQuery on change event that triggers when a file is selected. But it only works when a file is selected through the explorer menu, but not on the drag and drop event. Why?
$(document).ready(function() {
$('label').on('drag dragstart dragend dragover dragenter dragleave drop', function(event) {
event.preventDefault();
event.stopPropagation();
})
.on('dragover dragenter', function() {
$(this).addClass('is-dragover');
})
.on('dragleave dragend drop', function() {
$(this).removeClass('is-dragover');
})
.on('drop', function(event) {
// Set file on drop
$('input[type=file]').prop('files', event.originalEvent.dataTransfer.files);
});
// Check if change event works
$('input[type=file]').on('change', function(event) {
$('#result span').text(event.target.files[0].name);
});
});input {
display: block;
margin-bottom: 10px;
}
label {
padding: 20px;
display: inline-block;
border: 2px dashed grey;
}
label:hover {
background: lightgray;
cursor: pointer;
}
label.is-dragover {
background: grey;
}
#result {
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file-field" name="file-field">
<label for="file-field">Click to select (works)<br>Drop file (doesn't work)</label>
<div id="result">
File on change event: <span></span>
</div>
