From 89d0a9d59f1b7ca2854ee76206ec0fa748867580 Mon Sep 17 00:00:00 2001
From: Matthias Keim <matthias@keim.dev>
Date: Mon, 20 Jul 2026 21:03:42 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20attach=20file=20picker=20input=20to?=
 =?UTF-8?q?=20DOM=20so=20iOS=20Safari=20fires=20change=20=E2=80=A6=20(#296?=
 =?UTF-8?q?60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
---
 web/src/lib/utils/file-uploader.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index d923d5ba76..0d0630a017 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -63,6 +63,8 @@ export const openFilePicker = async (options: FilePickerParam = {}) => {
       fileSelector.addEventListener(
         'change',
         (e: Event) => {
+          fileSelector.remove();
+
           const target = e.target as HTMLInputElement;
           if (!target.files) {
             return;
@@ -74,6 +76,11 @@ export const openFilePicker = async (options: FilePickerParam = {}) => {
         { passive: true },
       );
 
+      fileSelector.addEventListener('cancel', () => fileSelector.remove(), { passive: true });
+
+      // Safari requires the file selector to be mounted
+      fileSelector.hidden = true;
+      document.body.append(fileSelector);
       fileSelector.click();
     } catch (error) {
       console.log('Error selecting file', error);