diff --git a/src/lib/elements/FileUploadPreview.svelte b/src/lib/elements/FileUploadPreview.svelte
index 0305d79c2..fa849461c 100644
--- a/src/lib/elements/FileUploadPreview.svelte
+++ b/src/lib/elements/FileUploadPreview.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import { Button, Icon, Text } from "$lib/elements"
     import { Shape, Size } from "$lib/enums"
+    import { createEventDispatcher } from "svelte"
 
     import { _ } from "svelte-i18n"
 
     export let filesSelected: [File?, string?][] = []
+    const dispatcher = createEventDispatcher()
     function removeFile(file: File | string) {
-        filesSelected = filesSelected.filter(([f, p]) => f !== file && p !== file)
+        dispatcher("remove", file)
     }
 </script>
 
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index f7089c553..c3b000df0 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -674,7 +674,11 @@
         </Conversation>
 
         {#if files.length > 0}
-            <FileUploadPreview filesSelected={files} />
+            <FileUploadPreview
+                filesSelected={files}
+                on:remove={e => {
+                    files = files.filter(([f, p]) => f !== e.detail && p !== e.detail)
+                }} />
         {/if}
 
         {#if $activeChat.users.length > 0}