From f35f615e33a5dd90bfeb106b6f5dca689849fcef Mon Sep 17 00:00:00 2001
From: Shubham raj <45156638+shubhamofbce@users.noreply.github.com>
Date: Fri, 9 Feb 2024 22:25:47 +0530
Subject: [PATCH] Added remove button for every file in file preview, to remove
 individual file in gr.File() (#7299)

* Add remove button for every file in file preview

* add changeset

* tweak remove file button

* format

* dispatch change event

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .changeset/cold-cases-clean.md    |  6 ++++++
 js/file/shared/FilePreview.svelte | 33 +++++++++++++++++++++++++++++++
 js/file/shared/FileUpload.svelte  |  2 +-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cold-cases-clean.md

diff --git a/.changeset/cold-cases-clean.md b/.changeset/cold-cases-clean.md
new file mode 100644
index 0000000000..0a324dd2d0
--- /dev/null
+++ b/.changeset/cold-cases-clean.md
@@ -0,0 +1,6 @@
+---
+"@gradio/file": minor
+"gradio": minor
+---
+
+feat:Added remove button for every file in file preview, to remove individual file in gr.File()
diff --git a/js/file/shared/FilePreview.svelte b/js/file/shared/FilePreview.svelte
index f40445f827..5b1e264b33 100644
--- a/js/file/shared/FilePreview.svelte
+++ b/js/file/shared/FilePreview.svelte
@@ -7,6 +7,7 @@
 
 	const dispatch = createEventDispatcher<{
 		select: SelectData;
+		change: FileData[] | FileData;
 	}>();
 	export let value: FileData | FileData[];
 	export let selectable = false;
@@ -29,6 +30,13 @@
 			filename_ext
 		};
 	});
+
+	function remove_file(index: number): void {
+		normalized_files.splice(index, 1);
+		normalized_files = [...normalized_files];
+		value = normalized_files;
+		dispatch("change", normalized_files);
+	}
 </script>
 
 <div
@@ -66,6 +74,21 @@
 							{i18n("file.uploading")}
 						{/if}
 					</td>
+					{#if normalized_files.length > 1}
+						<td>
+							<button
+								class="label-clear-button"
+								aria-label="Remove this file"
+								on:click={() => remove_file(i)}
+								on:keydown={(event) => {
+									if (event.key === "Enter") {
+										remove_file(i);
+									}
+								}}
+								>×
+							</button>
+						</td>
+					{/if}
 				</tr>
 			{/each}
 		</tbody>
@@ -73,6 +96,16 @@
 </div>
 
 <style>
+	.label-clear-button {
+		color: var(--body-text-color-subdued);
+		position: relative;
+		left: -3px;
+	}
+
+	.label-clear-button:hover {
+		color: var(--body-text-color);
+	}
+
 	.file-preview {
 		table-layout: fixed;
 		width: var(--size-full);
diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
index be6c4eaeb9..4af1489b5f 100644
--- a/js/file/shared/FileUpload.svelte
+++ b/js/file/shared/FileUpload.svelte
@@ -69,7 +69,7 @@
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
 	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
-	<FilePreview {i18n} on:select {selectable} {value} {height} />
+	<FilePreview {i18n} on:select {selectable} {value} {height} on:change />
 {:else}
 	<Upload
 		on:load={handle_upload}