Fixed #1013 - Event for file remove in FileUpload

pull/1196/head^2
Cagatay Civici 2021-05-14 12:08:46 +03:00
parent 025d9381a0
commit 805efbea4e
3 changed files with 66 additions and 55 deletions

View File

@ -30,6 +30,7 @@ declare class FileUpload {
$emit(eventName: 'error', e: { originalEvent: Event, files: any }): this;
$emit(eventName: 'before-send', e: { xhr: XMLHttpRequest, formData: any }): this;
$emit(eventName: 'clear'): this;
$emit(eventName: 'remove', e: { file: File, files: File[] }): this;
}
export default FileUpload;

View File

@ -48,7 +48,7 @@ import Ripple from 'primevue/ripple';
export default {
name: 'FileUpload',
emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear'],
emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove'],
props: {
name: {
type: String,
@ -357,8 +357,12 @@ export default {
},
remove(index) {
this.clearInputElement();
this.files.splice(index, 1);
let removedFile = this.files.splice(index, 1)[0];
this.files = [...this.files];
this.$emit('remove', {
file: removedFile,
files: this.files
});
},
clearInputElement() {
this.$refs.fileInput.value = '';

View File

@ -223,61 +223,67 @@ myUploader(event) {
<div classe="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>before-upload</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file upload begins to customize the request
such as post parameters before the files.</td>
</tr>
<tr>
<td>before-send</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file send begins to customize the request
such as adding headers.</td>
</tr>
<tr>
<td>upload</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>error</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded.</td>
<td>Callback to invoke if file upload fails.</td>
</tr>
<tr>
<td>clear</td>
<td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td>
</tr>
<tr>
<td>select</td>
<td>event.originalEvent: Original browser event. <br />
event.files: List of selected files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>progress</td>
<td>event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td>
</tr>
<tr>
<td>uploader</td>
<td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td>
</tr>
<tr>
<td>before-upload</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file upload begins to customize the request
such as post parameters before the files.</td>
</tr>
<tr>
<td>before-send</td>
<td>event.xhr: XmlHttpRequest instance. <br/>
event.formData: FormData object.</td>
<td>Callback to invoke before file send begins to customize the request
such as adding headers.</td>
</tr>
<tr>
<td>upload</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>error</td>
<td>event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded.</td>
<td>Callback to invoke if file upload fails.</td>
</tr>
<tr>
<td>clear</td>
<td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td>
</tr>
<tr>
<td>select</td>
<td>event.originalEvent: Original browser event. <br />
event.files: List of selected files.</td>
<td>Callback to invoke when file upload is complete.</td>
</tr>
<tr>
<td>progress</td>
<td>event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td>
</tr>
<tr>
<td>uploader</td>
<td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td>
</tr>
<tr>
<td>remove</td>
<td>event.file: Remove filed <br />
event.files: Remaining files to be uploaded.</td>
<td>Callback to invoke when a singe file is removed from the list.</td>
</tr>
</tbody>
</table>
</div>