Tengo una entrada de archivo para cargar imágenes con arrastrar y soltar.
<input type="file" ref="FileInput" style="display: none;" @change="onFileSelect" accept=".jpg,.jpeg,.png,.tiff,.webp" />que desencadena una función OnFileSelect en el cambio.
onFileSelect(e) { console.log("came here"); const file = e.target.files[0]; ... ... // here the code sends the files to be uploaded in server }Hay una zona de descenso que contiene el campo de entrada:
<div ref="dropZone" @drop="onDrop($event)" @click="$refs.FileInput.click()" >y la función onDrop es la siguiente:
onDrop(e) { this.$refs.FileInput.files = e.dataTransfer.files; //this changes fileList in input but the onChange in input field is not triggered console.log("Yes", this.$refs.FileInput.files); },Si bien onDrop se activa cuando coloco un archivo de imagen en la zona de colocación y la lista de archivos en la entrada también cambia, la función onFileSelect (que debería activarse cuando cambia la entrada) no se llama después de la función onDrop. ¿Cómo puedo conseguir esto? ¡Gracias por adelantado!
El evento onChange de los archivos de tipo de entrada no se activará en dropEnd .
En su lugar, debe modificar su método onChange actual. Para que uses el mismo código para drop end.
Actualice su método onFileSelect de esta manera:
onFileSelect(e) { console.log("came here"); const file = e.target.files[0]; uploadFile(file) // this method will be responsible for uploading file to server. Move all code written in onFileSelect to this method. }Ahora en DropEnd, simplemente llame a este método con el parámetro de archivo.
onDrop(e) { uploadFile(e.dataTransfer.files[0]) },