@uploadcare/file-uploader 1.24.0-alpha.2 → 1.24.1

package/dist/index.js

@@ -1216,7 +1216,7 @@ import { TelemetryAPIService } from "@uploadcare/quality-insights";
 import { Queue as Queue2 } from "@uploadcare/upload-client";
 
 // package.json
-var version = "1.24.0-alpha.2";
+var version = "1.24.1";
 
 // src/env.ts
 var PACKAGE_NAME = "blocks";
@@ -1547,7 +1547,7 @@ var Block = class extends BaseComponent {
     return testId;
   }
   get modalManager() {
-    return this.has("*modalManager") && this.$["*modalManager"];
+    return this.has("*modalManager") ? this.$["*modalManager"] : void 0;
   }
   get telemetryManager() {
     if (!this.cfg.qualityInsights) {
@@ -1590,7 +1590,7 @@ var Block = class extends BaseComponent {
   destroyCtxCallback() {
     Data.deleteCtx(this.ctxName);
     this.localeManager?.destroy();
-    this.modalManager && this.modalManager?.destroy();
+    this.modalManager?.destroy();
   }
   async proxyUrl(url) {
     if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {
@@ -1741,7 +1741,7 @@ var ActivityBlock = class _ActivityBlock extends Block {
     }
   }
   _isActivityRegistered() {
-    return this.activityType && _ActivityBlock._activityCallbacks.has(this);
+    return !!this.activityType && _ActivityBlock._activityCallbacks.has(this);
   }
   static _activityCallbacks = /* @__PURE__ */ new Map();
   // declare static activities to satisfy type references below
@@ -3511,11 +3511,7 @@ var UploaderPublicApi = class {
   /**
    * TODO: Probably we should not allow user to override `source` property
    */
-  addFileFromUrl = (url, {
-    silent,
-    fileName,
-    source
-  } = {}) => {
+  addFileFromUrl = (url, { silent, fileName, source } = {}) => {
     const internalId = this._uploadCollection.add({
       externalUrl: url,
       fileName: fileName ?? null,
@@ -3524,11 +3520,7 @@ var UploaderPublicApi = class {
     });
     return this.getOutputItem(internalId);
   };
-  addFileFromUuid = (uuid, {
-    silent,
-    fileName,
-    source
-  } = {}) => {
+  addFileFromUuid = (uuid, { silent, fileName, source } = {}) => {
     const internalId = this._uploadCollection.add({
       uuid,
       fileName: fileName ?? null,
@@ -3537,11 +3529,7 @@ var UploaderPublicApi = class {
     });
     return this.getOutputItem(internalId);
   };
-  addFileFromCdnUrl = (cdnUrl, {
-    silent,
-    fileName,
-    source
-  } = {}) => {
+  addFileFromCdnUrl = (cdnUrl, { silent, fileName, source } = {}) => {
     const parsedCdnUrl = parseCdnUrl({
       url: cdnUrl,
       cdnBase: this.cfg.cdnCname
@@ -3603,10 +3591,7 @@ var UploaderPublicApi = class {
   };
   openSystemDialog = (options = {}) => {
     const accept = serializeCsv(
-      mergeFileTypes([
-        this.cfg.accept ?? "",
-        ...this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : []
-      ])
+      mergeFileTypes([this.cfg.accept ?? "", ...this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : []])
     );
     const INPUT_ATTR_NAME = "uploadcare-file-input";
     const fileInput = document.createElement("input");
@@ -3624,18 +3609,13 @@ var UploaderPublicApi = class {
     fileInput.multiple = this.cfg.multiple;
     if (options.captureCamera) {
       fileInput.capture = this.cfg.cameraCapture;
-      const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(
-        this.cfg
-      );
+      const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(this.cfg);
       if (options.modeCamera === CameraSourceTypes.PHOTO && isPhotoEnabled) {
         fileInput.accept = BASIC_IMAGE_WILDCARD;
       } else if (options.modeCamera === CameraSourceTypes.VIDEO && isVideoRecordingEnabled) {
         fileInput.accept = BASIC_VIDEO_WILDCARD;
       } else {
-        fileInput.accept = [
-          BASIC_IMAGE_WILDCARD,
-          isVideoRecordingEnabled && BASIC_VIDEO_WILDCARD
-        ].filter(Boolean).join(",");
+        fileInput.accept = [BASIC_IMAGE_WILDCARD, isVideoRecordingEnabled && BASIC_VIDEO_WILDCARD].filter(Boolean).join(",");
       }
     } else {
       fileInput.accept = accept;
@@ -3713,9 +3693,7 @@ var UploaderPublicApi = class {
           return;
         }
         if (srcKey === "camera" && browserFeatures.htmlMediaCapture) {
-          const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(
-            this.cfg
-          );
+          const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(this.cfg);
           if (isPhotoEnabled && isVideoRecordingEnabled) {
             this._ctx.set$({
               "*currentActivity": ActivityBlock.activities.START_FROM
@@ -3773,9 +3751,7 @@ var UploaderPublicApi = class {
   };
   setModalState = (opened) => {
     if (opened && !this._ctx.$["*currentActivity"]) {
-      console.warn(
-        `Can't open modal without current activity. Please use "setCurrentActivity" method first.`
-      );
+      console.warn(`Can't open modal without current activity. Please use "setCurrentActivity" method first.`);
       return;
     }
     if (opened) {
@@ -4425,9 +4401,7 @@ var CameraSource = class extends UploaderBlock {
     }
   };
   _updateTimer = () => {
-    const currentTime = Math.floor(
-      (performance.now() - this.$._startTime + this.$._elapsedTime) / 1e3
-    );
+    const currentTime = Math.floor((performance.now() - this.$._startTime + this.$._elapsedTime) / 1e3);
     if (typeof this.cfg.maxVideoRecordingDuration === "number" && this.cfg.maxVideoRecordingDuration > 0) {
       const remainingTime = this.cfg.maxVideoRecordingDuration - currentTime;
       if (remainingTime <= 0) {
@@ -4496,22 +4470,16 @@ var CameraSource = class extends UploaderBlock {
       if (this._stream) {
         this._mediaRecorder = new MediaRecorder(this._stream, this._options);
         this._mediaRecorder.start();
-        this._mediaRecorder.addEventListener(
-          "dataavailable",
-          (event) => {
-            this._chunks.push(event.data);
-          }
-        );
+        this._mediaRecorder.addEventListener("dataavailable", (event) => {
+          this._chunks.push(event.data);
+        });
         this._startTimer();
         this.classList.add("uc-recording");
         this._setCameraState(CameraSourceEvents.PLAY);
       }
     } catch (error) {
       console.error("Failed to start recording", error);
-      this.telemetryManager.sendEventError(
-        error,
-        "camera recording. Failed to start recording"
-      );
+      this.telemetryManager.sendEventError(error, "camera recording. Failed to start recording");
     }
   };
   _stopRecording = () => {
@@ -4570,10 +4538,7 @@ var CameraSource = class extends UploaderBlock {
       });
     } catch (error) {
       console.error("Failed to preview video", error);
-      this.telemetryManager.sendEventError(
-        error,
-        "camera previewing. Failed to preview video"
-      );
+      this.telemetryManager.sendEventError(error, "camera previewing. Failed to preview video");
     }
   };
   _retake = () => {
@@ -4594,12 +4559,7 @@ var CameraSource = class extends UploaderBlock {
         if (!blob2) {
           return;
         }
-        const file2 = this._createFile(
-          "camera",
-          "jpeg",
-          DEFAULT_PICTURE_FORMAT,
-          blob2
-        );
+        const file2 = this._createFile("camera", "jpeg", DEFAULT_PICTURE_FORMAT, blob2);
         this._toSend(file2);
       }, DEFAULT_PICTURE_FORMAT);
       return;
@@ -4760,47 +4720,44 @@ var CameraSource = class extends UploaderBlock {
       (mode) => mode === CameraSourceTypes.PHOTO || mode === CameraSourceTypes.VIDEO
     );
   }
-  _setPermissionsState = debounce(
-    (state) => {
-      this.classList.toggle("uc-initialized", state === "granted");
-      const visibleAudio = this._activeTab === CameraSourceTypes.VIDEO && this.cfg.enableAudioRecording;
-      const currentIcon = this._activeTab === CameraSourceTypes.PHOTO ? "camera-full" : "video-camera-full";
-      if (state === "granted") {
-        this.set$({
-          videoHidden: false,
-          cameraHidden: false,
-          tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
-          tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
-          messageHidden: true,
-          timerHidden: true,
-          currentIcon,
-          audioToggleMicrophoneHidden: !visibleAudio,
-          audioSelectHidden: !visibleAudio
-        });
-      } else if (state === "prompt") {
-        this.$.l10nMessage = "camera-permissions-prompt";
-        this.set$({
-          videoHidden: true,
-          cameraHidden: true,
-          tabCameraHidden: true,
-          messageHidden: false
-        });
-        this._stopCapture();
-      } else {
-        this.$.l10nMessage = "camera-permissions-denied";
-        this.set$({
-          videoHidden: true,
-          messageHidden: false,
-          tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
-          tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
-          cameraActionsHidden: true,
-          mutableClassButton: "uc-shot-btn uc-camera-action"
-        });
-        this._stopCapture();
-      }
-    },
-    300
-  );
+  _setPermissionsState = debounce((state) => {
+    this.classList.toggle("uc-initialized", state === "granted");
+    const visibleAudio = this._activeTab === CameraSourceTypes.VIDEO && this.cfg.enableAudioRecording;
+    const currentIcon = this._activeTab === CameraSourceTypes.PHOTO ? "camera-full" : "video-camera-full";
+    if (state === "granted") {
+      this.set$({
+        videoHidden: false,
+        cameraHidden: false,
+        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
+        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
+        messageHidden: true,
+        timerHidden: true,
+        currentIcon,
+        audioToggleMicrophoneHidden: !visibleAudio,
+        audioSelectHidden: !visibleAudio
+      });
+    } else if (state === "prompt") {
+      this.$.l10nMessage = "camera-permissions-prompt";
+      this.set$({
+        videoHidden: true,
+        cameraHidden: true,
+        tabCameraHidden: true,
+        messageHidden: false
+      });
+      this._stopCapture();
+    } else {
+      this.$.l10nMessage = "camera-permissions-denied";
+      this.set$({
+        videoHidden: true,
+        messageHidden: false,
+        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
+        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
+        cameraActionsHidden: true,
+        mutableClassButton: "uc-shot-btn uc-camera-action"
+      });
+      this._stopCapture();
+    }
+  }, 300);
   _makeStreamInactive = () => {
     if (!this._stream) return false;
     const audioTracks = this._stream?.getAudioTracks();
@@ -4858,10 +4815,7 @@ var CameraSource = class extends UploaderBlock {
     } catch (error) {
       this._setPermissionsState("denied");
       console.log("Failed to capture camera", error);
-      this.telemetryManager.sendEventError(
-        error,
-        "camera capturing. Failed to capture camera"
-      );
+      this.telemetryManager.sendEventError(error, "camera capturing. Failed to capture camera");
     }
   };
   _handlePermissionsChange = () => {
@@ -4877,14 +4831,8 @@ var CameraSource = class extends UploaderBlock {
         response.addEventListener("change", this._handlePermissionsChange);
       }
     } catch (error) {
-      console.log(
-        "Failed to use permissions API. Fallback to manual request mode.",
-        error
-      );
-      this.telemetryManager.sendEventError(
-        error,
-        "camera permissions. Failed to use permissions API"
-      );
+      console.log("Failed to use permissions API. Fallback to manual request mode.", error);
+      this.telemetryManager.sendEventError(error, "camera permissions. Failed to use permissions API");
       this._capture();
     }
   };
@@ -4899,10 +4847,7 @@ var CameraSource = class extends UploaderBlock {
       await this._getDevices();
       navigator.mediaDevices.addEventListener("devicechange", this._getDevices);
     } catch (error) {
-      this.telemetryManager.sendEventError(
-        error,
-        "camera devices. Failed to get user media"
-      );
+      this.telemetryManager.sendEventError(error, "camera devices. Failed to get user media");
       console.log("Failed to get user media", error);
     }
   };
@@ -4932,10 +4877,7 @@ var CameraSource = class extends UploaderBlock {
       }
       this._selectedAudioId = this._audioDevices[0]?.value ?? null;
     } catch (error) {
-      this.telemetryManager.sendEventError(
-        error,
-        "camera devices. Failed to get devices"
-      );
+      this.telemetryManager.sendEventError(error, "camera devices. Failed to get devices");
       console.log("Failed to get devices", error);
     }
   };
@@ -4949,9 +4891,7 @@ var CameraSource = class extends UploaderBlock {
     if (this._unsubPermissions) {
       this._unsubPermissions();
     }
-    const isChromium = Boolean(
-      window.chrome
-    );
+    const isChromium = Boolean(window.chrome);
     if (!isChromium) {
       this._setPermissionsState("denied");
     }
@@ -4990,15 +4930,9 @@ var CameraSource = class extends UploaderBlock {
   }
   _destroy() {
     for (const permission of DEFAULT_PERMISSIONS) {
-      this._permissionResponses[permission]?.removeEventListener(
-        "change",
-        this._handlePermissionsChange
-      );
+      this._permissionResponses[permission]?.removeEventListener("change", this._handlePermissionsChange);
     }
-    navigator.mediaDevices?.removeEventListener(
-      "devicechange",
-      this._getDevices
-    );
+    navigator.mediaDevices?.removeEventListener("devicechange", this._getDevices);
   }
   async destroyCallback() {
     super.destroyCallback();
@@ -6127,9 +6061,7 @@ function batchPreloadImages(list) {
     preloaders.push(preload);
   }
   const images = preloaders.map((preload) => preload.image);
-  const promise = Promise.allSettled(
-    preloaders.map((preload) => preload.promise)
-  );
+  const promise = Promise.allSettled(preloaders.map((preload) => preload.promise));
   const cancel = () => {
     preloaders.forEach((preload) => {
       preload.cancel();
@@ -8247,6 +8179,110 @@ var runAssertions = debounce((cfg) => {
   }
 }, 0);
 
+// src/blocks/Config/computed-properties.ts
+import { getPrefixedCdnBaseAsync, isPrefixedCdnBase } from "@uploadcare/cname-prefix/async";
+
+// src/utils/isPromiseLike.ts
+var isPromiseLike = (value) => {
+  return value instanceof Promise || Boolean(
+    value && typeof value === "object" && "then" in value && typeof value.then === "function"
+  );
+};
+
+// src/blocks/Config/computed-properties.ts
+var defineComputedProperty = (declaration) => declaration;
+var COMPUTED_PROPERTIES = [
+  defineComputedProperty({
+    key: "cameraModes",
+    deps: ["enableVideoRecording"],
+    fn: ({ cameraModes, enableVideoRecording }) => {
+      if (enableVideoRecording === null) {
+        return cameraModes;
+      }
+      let cameraModesCsv = deserializeCsv(cameraModes);
+      if (enableVideoRecording && !cameraModesCsv.includes("video")) {
+        cameraModesCsv = cameraModesCsv.concat("video");
+      } else if (!enableVideoRecording) {
+        cameraModesCsv = cameraModesCsv.filter((mode) => mode !== "video");
+      }
+      return serializeCsv(cameraModesCsv);
+    }
+  }),
+  defineComputedProperty({
+    key: "cameraModes",
+    deps: ["defaultCameraMode"],
+    fn: ({ cameraModes, defaultCameraMode }) => {
+      if (defaultCameraMode === null) {
+        return cameraModes;
+      }
+      let cameraModesCsv = deserializeCsv(cameraModes);
+      cameraModesCsv = cameraModesCsv.sort((a, b) => {
+        if (a === defaultCameraMode) return -1;
+        if (b === defaultCameraMode) return 1;
+        return 0;
+      });
+      return serializeCsv(cameraModesCsv);
+    }
+  }),
+  defineComputedProperty({
+    key: "cdnCname",
+    deps: ["pubkey", "cdnCnamePrefixed"],
+    fn: ({ pubkey, cdnCname, cdnCnamePrefixed }) => {
+      if (pubkey && (cdnCname === DEFAULT_CDN_CNAME || isPrefixedCdnBase(cdnCname, cdnCnamePrefixed))) {
+        return getPrefixedCdnBaseAsync(pubkey, cdnCnamePrefixed);
+      }
+      return cdnCname;
+    }
+  })
+];
+var abortControllers = /* @__PURE__ */ new Map();
+var computeProperty = ({ key, setValue, getValue }) => {
+  for (const computed of COMPUTED_PROPERTIES) {
+    if (computed.deps.includes(key)) {
+      const args = {
+        [computed.key]: getValue(computed.key)
+      };
+      for (const dep of computed.deps) {
+        args[dep] = getValue(dep);
+      }
+      const abortController = new AbortController();
+      abortControllers.get(computed.key)?.abort();
+      abortControllers.set(computed.key, abortController);
+      let result;
+      try {
+        result = computed.fn(args, {
+          signal: abortController.signal
+        });
+      } catch (error) {
+        if (abortControllers.get(computed.key) === abortController) {
+          abortControllers.delete(computed.key);
+        }
+        console.error(`Failed to compute value for "${computed.key}"`, error);
+        return;
+      }
+      if (isPromiseLike(result)) {
+        result.then((resolvedValue) => {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          setValue(computed.key, resolvedValue);
+        }).catch((error) => {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          console.error(`Failed to compute value for "${computed.key}"`, error);
+        }).finally(() => {
+          if (abortControllers.get(computed.key) === abortController) {
+            abortControllers.delete(computed.key);
+          }
+        });
+      } else {
+        setValue(computed.key, result);
+      }
+    }
+  }
+};
+
 // src/blocks/Config/validatorsType.ts
 var asString = (value) => String(value);
 var asNumber2 = (value) => {
@@ -8406,89 +8442,6 @@ var normalizeConfigValue = (key, value) => {
   }
 };
 
-// src/blocks/Config/side-effects.ts
-import { getPrefixedCdnBaseAsync, isPrefixedCdnBase } from "@uploadcare/cname-prefix/async";
-
-// src/utils/isPromiseLike.ts
-var isPromiseLike = (value) => {
-  return value instanceof Promise || Boolean(
-    value && typeof value === "object" && "then" in value && typeof value.then === "function"
-  );
-};
-
-// src/blocks/Config/side-effects.ts
-var defineComputedProperty = (declaration) => declaration;
-var COMPUTED_PROPERTIES = [
-  defineComputedProperty({
-    key: "cameraModes",
-    deps: ["enableVideoRecording"],
-    fn: ({ cameraModes, enableVideoRecording }) => {
-      if (enableVideoRecording === null) {
-        return cameraModes;
-      }
-      let cameraModesCsv = deserializeCsv(cameraModes);
-      if (enableVideoRecording && !cameraModesCsv.includes("video")) {
-        cameraModesCsv = cameraModesCsv.concat("video");
-      } else if (!enableVideoRecording) {
-        cameraModesCsv = cameraModesCsv.filter((mode) => mode !== "video");
-      }
-      return serializeCsv(cameraModesCsv);
-    }
-  }),
-  defineComputedProperty({
-    key: "cameraModes",
-    deps: ["defaultCameraMode"],
-    fn: ({ cameraModes, defaultCameraMode }) => {
-      if (defaultCameraMode === null) {
-        return cameraModes;
-      }
-      let cameraModesCsv = deserializeCsv(cameraModes);
-      cameraModesCsv = cameraModesCsv.sort((a, b) => {
-        if (a === defaultCameraMode) return -1;
-        if (b === defaultCameraMode) return 1;
-        return 0;
-      });
-      return serializeCsv(cameraModesCsv);
-    }
-  }),
-  defineComputedProperty({
-    key: "cdnCname",
-    deps: ["pubkey", "cdnCnamePrefixed"],
-    fn: ({ pubkey, cdnCname, cdnCnamePrefixed }) => {
-      if (pubkey && (cdnCname === DEFAULT_CDN_CNAME || isPrefixedCdnBase(cdnCname, cdnCnamePrefixed))) {
-        return getPrefixedCdnBaseAsync(pubkey, cdnCnamePrefixed);
-      }
-      return cdnCname;
-    }
-  })
-];
-var runSideEffects = ({ key, setValue, getValue }) => {
-  for (const computed of COMPUTED_PROPERTIES) {
-    if (computed.deps.includes(key)) {
-      const args = {
-        [computed.key]: getValue(computed.key)
-      };
-      for (const dep of computed.deps) {
-        args[dep] = getValue(dep);
-      }
-      const result = computed.fn(args);
-      if (isPromiseLike(result)) {
-        const prevValue = getValue(computed.key);
-        result.then((resolvedValue) => {
-          const currentValue = getValue(computed.key);
-          if (currentValue === prevValue) {
-            setValue(computed.key, resolvedValue);
-          }
-        }).catch((error) => {
-          console.error(`Failed to compute value for "${computed.key}"`, error);
-        });
-      } else {
-        setValue(computed.key, result);
-      }
-    }
-  }
-};
-
 // src/blocks/Config/Config.ts
 var allConfigKeys = [
   // "debug" option should go first to be able to print debug messages from the very beginning
@@ -8558,11 +8511,6 @@ var Config = class extends Block {
     this._flushValueToState(key, normalizedValue);
     this.debugPrint(`[uc-config] "${key}"`, normalizedValue);
     runAssertions(this.cfg);
-    runSideEffects({
-      key,
-      setValue: this._setValue.bind(this),
-      getValue: this._getValue.bind(this)
-    });
   }
   _getValue(key) {
     const anyThis = this;
@@ -8608,10 +8556,14 @@ var Config = class extends Block {
           return this._getValue(key);
         }
       });
-      runSideEffects({
-        key,
-        setValue: this._setValue.bind(this),
-        getValue: this._getValue.bind(this)
+    }
+    for (const key of allConfigKeys) {
+      this.sub(sharedConfigKey(key), () => {
+        computeProperty({
+          key,
+          setValue: this._setValue.bind(this),
+          getValue: this._getValue.bind(this)
+        });
       });
     }
   }
@@ -9180,8 +9132,10 @@ var isWhitelistedMessage = (message) => {
 var MessageBridge = class {
   _handlerMap = /* @__PURE__ */ new Map();
   _context;
-  constructor(context) {
+  _getTargetOrigin;
+  constructor(context, getTargetOrigin) {
     this._context = context;
+    this._getTargetOrigin = getTargetOrigin;
     window.addEventListener("message", this._handleMessage);
   }
   _handleMessage = (e) => {
@@ -9207,7 +9161,8 @@ var MessageBridge = class {
     handlers.add(handler);
   }
   send(message) {
-    this._context.postMessage(message, "*");
+    const targetOrigin = this._getTargetOrigin();
+    this._context.postMessage(message, targetOrigin);
   }
   destroy() {
     window.removeEventListener("message", this._handleMessage);
@@ -9247,6 +9202,7 @@ var ExternalSource = class extends UploaderBlock {
       couldSelectAll: false,
       couldDeselectAll: false,
       showSelectionStatus: false,
+      showDoneBtn: false,
       counterText: "",
       doneBtnTextClass: "uc-hidden",
       toolbarVisible: true,
@@ -9356,7 +9312,8 @@ var ExternalSource = class extends UploaderBlock {
       showSelectionStatus: message.isMultipleMode && message.total > 0,
       couldSelectAll: message.selectedCount < message.total,
       couldDeselectAll: message.selectedCount === message.total,
-      selectedList: message.selectedFiles
+      selectedList: message.selectedFiles,
+      showDoneBtn: message.total > 0
     });
   }
   handleIframeLoad() {
@@ -9419,7 +9376,7 @@ var ExternalSource = class extends UploaderBlock {
       return;
     }
     this._messageBridge?.destroy();
-    this._messageBridge = new MessageBridge(iframe.contentWindow);
+    this._messageBridge = new MessageBridge(iframe.contentWindow, () => this.cfg.socialBaseUrl);
     this._messageBridge.on("selected-files-change", this.handleSelectedFilesChange.bind(this));
     this._messageBridge.on("toolbar-state-change", this.handleToolbarStateChange.bind(this));
     this.resetSelectionStatus();
@@ -9437,7 +9394,8 @@ var ExternalSource = class extends UploaderBlock {
       isDoneBtnEnabled: false,
       couldSelectAll: false,
       couldDeselectAll: false,
-      showSelectionStatus: false
+      showSelectionStatus: false,
+      showDoneBtn: false
     });
   }
 };
@@ -9462,7 +9420,11 @@ ExternalSource.template = /* HTML */
         <button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
         <button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
       </div>
-      <button type="button" class="uc-done-btn uc-primary-btn" set="onclick: onDone; @disabled: !isDoneBtnEnabled;">
+      <button
+        type="button"
+        class="uc-done-btn uc-primary-btn"
+        set="onclick: onDone; @disabled: !isDoneBtnEnabled; @hidden: !showDoneBtn"
+      >
         <uc-spinner set="@hidden: isSelectionReady"></uc-spinner>
         <span l10n="done" set="@class: doneBtnTextClass"></span>
       </button>
@@ -9631,6 +9593,7 @@ var FileItem = class _FileItem extends FileItemConfig {
       const errorText = entry.getValue("errors")?.[0]?.message;
       const source = entry.getValue("source");
       const externalUrl = entry.getValue("externalUrl");
+      const isFinished = state === FileItemState.FINISHED;
       const isUploading = state === FileItemState.UPLOADING;
       const isQueuedForUploading = state === FileItemState.QUEUED_UPLOADING;
       const isQueuedForValidation = state === FileItemState.QUEUED_VALIDATION;
@@ -9639,7 +9602,7 @@ var FileItem = class _FileItem extends FileItemConfig {
       let hint = "";
       if (errorText) {
         hint = "";
-      } else if (externalUrl && source && Object.values(ExternalUploadSource).includes(source)) {
+      } else if (!isFinished && externalUrl && source && Object.values(ExternalUploadSource).includes(source)) {
         hint = this.l10n("waiting-for", { source: this.l10n(`src-type-${source}`) });
       }
       this.set$({
@@ -11121,6 +11084,7 @@ var Thumb = class extends FileItemConfig {
     }
     return Math.min(size, CDN_MAX_OUTPUT_DIMENSION);
   }
+  // biome-ignore lint/style/noInferrableTypes: Here the type is needed because `_withEntry` could not infer it correctly
   _generateThumbnail = this._withEntry(async (entry, force = false) => {
     const fileInfo = entry.getValue("fileInfo");
     const isImage = entry.getValue("isImage");