Vue file upload - uploading the same file consecutively

Question

I'm trying to make a file upload functionality for a chat app. My HTML looks like: (I dont use forms)

 <span class="file-attach mr3">
  <input id="uploadFile" name="uploadFile" type="file" @change="attachFile($event.target.files)" multiple>
  <i class="w-10 ml4 icon-attach"></i>
</span>

And my typescript file looks like:

 async attachFile(files) {
if (!files.length) {
  return
}
const reader = new FileReader()
reader.addEventListener('loadend', () => {
  this.mediaLinkDocument = {
    title: this.file.type.indexOf('image') !== -1 ? '' : this.file.name,
    type: this.file.type,
    size: this.file.size,
  }
  this.sendFile(this.file)
})

Array.from(Array(files.length).keys()).forEach((id) => {
  console.log(files[id])
  this.file = files[id]

  if (this.file.size > MAX_ATTACHMENT_SIZE) {
    alert('O tamanho máximo é de 20 MB')
    this.file = undefined

    return
  }
  reader.readAsDataURL(this.file)
  files = {}
})

}

The upload works, but if the user uploads the same image, it don't make the @change callback and the file is not uploaded. Can anyone help me?

I'm not able to reproduce this. Check this pen. When I select the same file more than once, the event still fires. codepen.io/cfjedimaster/pen/aEQeeK?editors=1111 — Raymond Camden
– Raymond Camden, Commented Jan 18, 2018 at 20:30
Hey Raimond. So I tried your pen. When I try to upload a file twice in a row, the second time nothing happen. Are you telling me that this is working for you? — David Pena
– David Pena, Commented Jan 19, 2018 at 12:41
Ok, check this pen: codepen.io/cfjedimaster/pen/eybroW?editors=1111. I added a button to "clear" the value. This mimics what you would do when the file is done uploading. In this demo, it works in Chrome and FF both. — Raymond Camden
– Raymond Camden, Commented Jan 19, 2018 at 14:04

Raymond Camden · Accepted Answer · 2018-01-19 20:59:51Z

7

So after some research (see comments), myself and the author of the question figured out that Chrome will not fire a change event if you select the same file twice. Firefox does. So I suggested he simply set the value of the field to an empty string after the upload event is fired. That way when he selects the same file again, it will be considered a change.

answered Jan 19, 2018 at 20:59

Raymond Camden

10.9k3 gold badges36 silver badges73 bronze badges

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

2 Comments

Akash Kava Over a year ago

For this reason, I recommend using dynamic file input element and destroy and recreate new file element once file is chosen.

Tichel Over a year ago

So I did with this Fiddle

Mohamed Raza · Accepted Answer · 2021-08-03 16:56:31Z

1

Google Chrome did not fire the change event on the same file. to solve this issue I do as following on vuejs

<input
   ref="ExcelfileUpload"
   type="file"
   multiple="false"
   id="sheets"
   @change="onchangeOpenOrderUpload"
/> 



onchangeOpenOrderUpload(e) {
    ... codes
    this.$refs.ExcelfileUpload.value = "";
}

answered Aug 3, 2021 at 16:56

Mohamed Raza

1741 silver badge14 bronze badges

Collectives™ on Stack Overflow

Vue file upload - uploading the same file consecutively

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related