Added remove button for every file in file preview, to remove individ…

…ual 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

@@ -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()

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,13 +74,38 @@
 							{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>
 	</table>
 </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);

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}