fix: system file dialog on safari

uploadcare · Aug 15, 2024 · 5727f90 · 5727f90
1 parent def5f47
commit 5727f90
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/abstract/UploaderPublicApi.js b/abstract/UploaderPublicApi.js
@@ -147,7 +147,12 @@ export class UploaderPublicApi {
           'The value of `accept` will be concatenated with the internal image mime types list.',
       );
     }
-    const fileInput = document.createElement('input');
+
+    const INPUT_DATA_ATTR = 'data-uploadcare-temporary-input';
+
+    let fileInput = document.createElement('input');
+    fileInput.setAttribute(INPUT_DATA_ATTR, '');
+    fileInput.style.visibility = 'hidden';
     fileInput.type = 'file';
     fileInput.multiple = this.cfg.multiple;
     if (options.captureCamera) {
@@ -156,18 +161,28 @@ export class UploaderPublicApi {
     } else {
       fileInput.accept = accept;
     }
+    fileInput.addEventListener(
+      'change',
+      () => {
+        if (!fileInput.files) {
+          return;
+        }
+        [...fileInput.files].forEach((file) =>
+          this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
+        );
+        // To call uploadTrigger UploadList should draw file items first:
+        this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+        this._ctx.setOrAddState('*modalActive', true);
+        fileInput.remove();
+      },
+      {
+        once: true,
+      },
+    );
+
+    document.querySelectorAll(`[${INPUT_DATA_ATTR}]`).forEach((el) => el.remove());
+    document.body.appendChild(fileInput);
     fileInput.dispatchEvent(new MouseEvent('click'));
-    fileInput.onchange = () => {
-      // @ts-ignore TODO: fix this
-      [...fileInput['files']].forEach((file) =>
-        this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
-      );
-      // To call uploadTrigger UploadList should draw file items first:
-      this._ctx.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-      this._ctx.setOrAddState('*modalActive', true);
-      // @ts-ignore TODO: fix this
-      fileInput['value'] = '';
-    };
   };
 
   /**