Vue - File input element's @change not triggered when its files are set using ref - drag and drop file upload

Question

I have a file input for drag and drop image upload.

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

which triggers an OnFileSelect function on change.

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

There is a dropzone which contains the input field:

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

and the onDrop function is as follows:

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

While onDrop is triggered when I drop an image file in dropzone and the Filelist in input is also changed, the function onFileSelect (which should trigger when input changes) is not being called after the onDrop function. How can I achieve this? Thanks in advance!

Rahul · Accepted Answer · 2021-08-18 10:56:38Z

4

onChange event of input type files will not trigger on dropEnd.

Instead you have to modify your current onChange method. So that you use the same code for drop end.

Update your onFileSelect method like this:

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

Now on DropEnd, simple call this method with file parameter.

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

answered Aug 18, 2021 at 10:56

Rahul

5,9147 gold badges44 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parth Sahu Over a year ago

Any explanation for why the change event is not triggered?

Rahul Over a year ago

because we are not triggering any file event. Drag and drop event are completely different and has nothing to do with file event that's why.

Collectives™ on Stack Overflow

Vue - File input element's @change not triggered when its files are set using ref - drag and drop file upload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related