vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/fileupload/FileUpload.d.ts vendored
View File

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

8
src/components/fileupload/FileUpload.vue
View File

@ -48,7 +48,7 @@ import Ripple from 'primevue/ripple';
export default { export default {
name: 'FileUpload', 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: { props: {
name: { name: {
type: String, type: String,
@ -357,8 +357,12 @@ export default {
}, },
remove(index) { remove(index) {
this.clearInputElement(); this.clearInputElement();
this.files.splice(index, 1); let removedFile = this.files.splice(index, 1)[0];
this.files = [...this.files]; this.files = [...this.files];
this.$emit('remove', {
file: removedFile,
files: this.files
});
}, },
clearInputElement() { clearInputElement() {
this.$refs.fileInput.value = ''; this.$refs.fileInput.value = '';

112
src/views/fileupload/FileUploadDoc.vue
View File

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