Quiero arrastrar una imagen desde el navegador y soltarla dentro de un objeto y obtener el archivo soltado simplemente así:
$('#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>¿Pero el archivo devuelve una lista de archivos vacía?
¿Cómo puedo arreglar esto?
No obtiene una lista de archivos porque su const no es correcta.
Debe poner .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>