From f9a5bcee4c0bf75b07ac7e15a19c420db81eb738 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 28 Mar 2024 11:44:10 +0100
Subject: [PATCH] feat(frontend): Add support for clearFiles in the file input
 component (#3483)

---
 .../apps/components/inputs/AppFileInput.svelte        | 11 ++++++++++-
 .../lib/components/common/fileInput/FileInput.svelte  |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index 2c46d5e783..45a7c962b9 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -14,7 +14,7 @@
 	export let customCss: ComponentCustomCSS<'fileinputcomponent'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	let acceptedFileTypes: string[] | undefined = undefined
 	let allowMultiple: boolean | undefined = undefined
@@ -38,6 +38,14 @@
 	}
 
 	let css = initCss($app.css?.fileinputcomponent, customCss)
+
+	let fileInput: FileInput | undefined = undefined
+
+	$componentControl[id] = {
+		clearFiles: () => {
+			fileInput?.clearFiles()
+		}
+	}
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -71,6 +79,7 @@
 {#if render}
 	<div class="w-full h-full p-1">
 		<FileInput
+			bind:this={fileInput}
 			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
 			multiple={allowMultiple}
 			convertTo="base64"
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index ffa10c7f68..a115999da6 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -99,6 +99,11 @@
 			dispatch('change', files)
 		}
 	}
+
+	export function clearFiles() {
+		files = undefined
+		dispatchChange()
+	}
 </script>
 
 <button