I want to drag an image from browser and drop it inside an object and get the dropped file simply like this:
$('#image-upload-preview').on('drop', drop);
function drop(e) {
const file = e.originalEvent.dataTransfer;
console.log('file', file[0]); // this brings undefined
//console.log('file', file); // this bring empty file list
}
window.addEventListener("dragover", (e) => {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", (e) => {
e = e || event;
e.preventDefault();
}, false);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
<img id="image-upload-preview" style="width:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSClDjLZzrjD5FHPX-nNU5QoTWK-C2XcOD-M6Aabozw6Oem8-0ejje8Lk5DmNbhVOvvMfc&usqp=CAU">
<div id="cropped_result"></div>
</div>But the file returns empty file list???
How can I fix this?
You dont get list of files because your const is not correct.
You need to put .files : e.originalEvent.dataTransfer.const.files
$('#image-upload-preview').on('drop', drop);
function drop(e) {
e.stopPropagation();
e.preventDefault();
var file = e.originalEvent.dataTransfer.files;
var fd = new FormData();
console.log(file[0]);
fd.append('file', file[0]);
// process upload with ajax
}
window.addEventListener("dragover", (e) => {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", (e) => {
e = e || event;
e.preventDefault();
}, false);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
<img id="image-upload-preview" style="width:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSClDjLZzrjD5FHPX-nNU5QoTWK-C2XcOD-M6Aabozw6Oem8-0ejje8Lk5DmNbhVOvvMfc&usqp=CAU">
<div id="cropped_result"></div>
</div>