Блог

У меня есть файловый ввод для загрузки изображений перетаскиванием.

     <input
          type="file"
          ref="FileInput"
          style="display: none;"
          @change="onFileSelect"
          accept=".jpg,.jpeg,.png,.tiff,.webp"
        />
 

который запускает функцию выбора файлов при изменении.

 onFileSelect(e) {
      console.log("came here");
      const file = e.target.files[0];
      ...
      ...
      // here the code sends the files to be uploaded in server
}
 

Существует выпадающая зона, которая содержит поле ввода:

 <div
      ref="dropZone"
      @drop="onDrop($event)"
      @click="$refs.FileInput.click()"
    >
 

и функция onDrop выглядит следующим образом:

 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);
    },
 

В то время как onDrop запускается, когда я удаляю файл изображения в dropzone, и список файлов во входных данных также изменяется, функция onFileSelect (которая должна запускаться при изменении входных данных) не вызывается после функции onDrop. Как я могу этого достичь? Заранее спасибо!

onChange событие файлов входного типа не будет срабатывать dropEnd .

Вместо этого вы должны изменить свой текущий onChange метод. Чтобы вы использовали один и тот же код для отбрасывания.

Обновите свой onFileSelect метод следующим образом:

 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.
}
 

Теперь в DropEnd просто вызовите этот метод с параметром file.

 onDrop(e) {
     uploadFile(e.dataTransfer.files[0])
    },