Here is the code snippet I am currently working with:
HTML:
<input id="task-message-input-upload" type="file" ref="file" @change="handleFileUpload($event)" />
Javascript :
data() {
return {
uploadedFiles: [],
showPercentage: false,
uploadPercentage: 0,
file: {},
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
this.submitFile();
},
submitFile() {
$vm = this;
this.showPercentage = true;
let formDataF = new FormData();
formDataF.append('file', this.file);
axios.post('/api/v1/savemessagefile',
formDataF, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function(progressEvent) {
this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
}
.bind(this)
}
).then(function(response) {
$vm.uploadPercentage = 0;
$vm.uploadedFiles.push(response.data);
})
.catch(function() {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
Toast.fire({
type: 'warning',
title: '<%=i18n.__('upload_has_been_canceled ')%>'
})
});
},
}
An issue I am encountering is that after processing the file for the first time by clicking the button, it works fine. However, when I try to do the same action again for a second time, the file property remains empty in Chrome, while it works correctly in Firefox.
For reference, here is a gif image demonstrating the problem: https://i.stack.imgur.com/enbPv.gif