Hi,
I don't agree with GavynSykes, I don't think it's a designed behavior I can't believe the intent was to only let you process a single file. It might be a design limitation, meaning it can't be done within the limitations of the framework. But I stil think it's a bug. Anyway, I looked at the components' code and found that when it's used without a custom uploader it calls an internal clear() function after the call to the API, but when it has a custom uploader it only emits the event. You can see it here in the FileUpload.vue upload() function:
Code: Select all
upload() {
if (this.customUpload) {
if (this.fileLimit) {
this.uploadedFileCount += this.files.length;
}
this.$emit('uploader', {files: this.files});
}
else {
let xhr = new XMLHttpRequest();
let formData = new FormData();
this.$emit('before-upload', {
'xhr': xhr,
'formData': formData
});
for (let file of this.files) {
formData.append(this.name, file, file.name);
}
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
this.progress = Math.round((event.loaded * 100) / event.total);
}
this.$emit('progress', {
originalEvent: event,
progress: this.progress
});
});
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
this.progress = 0;
if (xhr.status >= 200 && xhr.status < 300) {
if (this.fileLimit) {
this.uploadedFileCount += this.files.length;
}
this.$emit('upload', {
xhr: xhr,
files: this.files
});
}
else {
this.$emit('error', {
xhr: xhr,
files: this.files
});
}
this.clear();
}
};
xhr.open('POST', this.url, true);
this.$emit('before-send', {
'xhr': xhr,
'formData': formData
});
xhr.withCredentials = this.withCredentials;
xhr.send(formData);
}
},
Seing that, I thought what if I called the FileUpload clear() function after I call my own upload API? I made a little test app and it works, it resets the component and allows you to process a new file. This is my App.vue, no real upload API call just a log, but the main thing is you're able to reset the FileUpload component.
Code: Select all
<template>
<FileUpload
ref="fileupload"
name="demo[]"
:customUpload="true"
@uploader="uploadFile"
/>
</template>
<script>
import FileUpload from 'primevue/fileupload';
export default {
name: 'App',
components: {
FileUpload
},
methods: {
uploadFile(e) {
console.log(e.files[0]);
this.$refs.fileupload.clear();
}
}
};
</script>