Currently, I am working on implementing a file upload feature for a chat application without using forms. Here is a snippet of my HTML:
<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>
In addition, here is how my TypeScript file is structured:
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 = {}
})
}
Although the file upload functionality works, there is an issue where if a user attempts to upload the same image again, the @change callback is not triggered and the file is not uploaded. Any suggestions or help would be greatly appreciated.