From 805efbea4edf46d00791ca02b0fec3da6f7dad32 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 14 May 2021 12:08:46 +0300
Subject: [PATCH] Fixed #1013 - Event for file remove in FileUpload

---
 src/components/fileupload/FileUpload.d.ts |   1 +
 src/components/fileupload/FileUpload.vue  |   8 +-
 src/views/fileupload/FileUploadDoc.vue    | 112 ++++++++++++----------
 3 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
index c41fc199b..1e53b833d 100755
--- a/src/components/fileupload/FileUpload.d.ts
+++ b/src/components/fileupload/FileUpload.d.ts
@@ -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;
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index 22d5fced6..bbd4cf3ca 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -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 = '';
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index 418670b45..3d060f22b 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -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>