@uploadcare/file-uploader 1.15.0-alpha.13 → 1.15.0-alpha.14

package/blocks/Thumb/Thumb.d.ts

@@ -1,6 +1,8 @@
 export class Thumb extends UploaderBlock {
     /** @private */
     private _entrySubs;
+    /** @private */
+    private _once;
     /**
      * @private
      * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
@@ -44,7 +46,13 @@ export class Thumb extends UploaderBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
-    _calculateThumbSize(): number;
+    /**
+     * Loads an image and sets it as the thumbnail.
+     *
+     * @param {string} imageUrl - The URL of the image to load.
+     */
+    loadImage(imageUrl: string): Promise<any>;
+    _calculateThumbSize(force?: boolean): number;
     /** @private */
     private _generateThumbnail;
     _debouncedGenerateThumb: ((...args: any[]) => Promise<void>) & {

package/blocks/Thumb/Thumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAQA;IACE,eAAe;IACf,mBAAuB;IAEvB;;;OAGG;IACH,eAAc;IAEd;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB;;;;;;OAMG;IACH,mBAYC;IAED;;;;OAIG;IACH,YAAa,OAHF,CAGO,EAAE,UAFT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAE5D,UAgBP;IAKnB;;;;;;;+CAnDI,gBAAU;mCAOf,gBAAQ;6BAAmF,2BACvF;;wCAI0C,wCAC3C;;;;;;MA2CD;IAGH,8BAYC;IAED,eAAe;IACf,2BAuCG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IAqCC,4CAAuG;CAY1G;;;;8BA3M6B,iCAAiC"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAQA;IACE,eAAe;IACf,mBAAuB;IAEvB,eAAe;IACf,cAAc;IAEd;;;OAGG;IACH,eAAc;IAEd;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAExB;;;;;;OAMG;IACH,mBAYC;IAED;;;;OAIG;IACH,YAAa,OAHF,CAGO,EAAE,UAFT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAE5D,UAgBP;IAKnB;;;;;;;+CArD0C,gBAAU;mCAOnD,gBACL;6BAC0D,2BAA2B;;wCAKzE,wCAA2B;;;;;;MA4ClC;IAGH;;;;OAIG;IACH,oBAFW,MAAM,gBAehB;IAED,6CAgBC;IAED,eAAe;IACf,2BA2CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IA4CC,4CAAuG;CAY1G;;;;8BAjP6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -10,6 +10,9 @@ export class Thumb extends UploaderBlock {
   /** @private */
   _entrySubs = new Set();
 
+  /** @private */
+  _once = false;
+
   /**
    * @private
    * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
@@ -79,7 +82,31 @@ export class Thumb extends UploaderBlock {
     };
   }
 
-  _calculateThumbSize() {
+  /**
+   * Loads an image and sets it as the thumbnail.
+   *
+   * @param {string} imageUrl - The URL of the image to load.
+   */
+  loadImage(imageUrl) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        this.set$({ thumbUrl: `url(${imageUrl})` });
+        resolve(true);
+      };
+      img.onerror = () => {
+        console.error('Failed to load image:', imageUrl);
+        reject(new Error(`Failed to load image: ${imageUrl}`));
+      };
+      img.src = imageUrl;
+    });
+  }
+
+  _calculateThumbSize(force = false) {
+    if (force) {
+      this._thumbRect = this.getBoundingClientRect();
+    }
+
     let size = Math.max(
       parseInt(String(this?._thumbRect?.height || 0)),
       parseInt(String(this?._thumbRect?.width || 0)),
@@ -94,11 +121,11 @@ export class Thumb extends UploaderBlock {
   }
 
   /** @private */
-  _generateThumbnail = this._withEntry(async (entry) => {
+  _generateThumbnail = this._withEntry(async (entry, force = false) => {
     const fileInfo = entry.getValue('fileInfo');
     const isImage = entry.getValue('isImage');
     const uuid = entry.getValue('uuid');
-    let size = this._calculateThumbSize();
+    let size = this._calculateThumbSize(force);
 
     if (fileInfo && isImage && uuid) {
       let thumbUrl = await this.proxyUrl(
@@ -107,11 +134,15 @@ export class Thumb extends UploaderBlock {
           createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center`),
         ),
       );
-      let currentThumbUrl = entry.getValue('thumbUrl');
-      if (currentThumbUrl !== thumbUrl) {
-        entry.setValue('thumbUrl', thumbUrl);
-        currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
-      }
+
+      this.loadImage(thumbUrl).then(() => {
+        let currentThumbUrl = entry.getValue('thumbUrl');
+        if (currentThumbUrl !== thumbUrl) {
+          entry.setValue('thumbUrl', thumbUrl);
+          currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
+        }
+      });
+
       return;
     }
 
@@ -185,6 +216,13 @@ export class Thumb extends UploaderBlock {
       }
     });
 
+    this.subConfigValue('filesViewMode', (viewMode) => {
+      if (!this._once && viewMode === 'grid') {
+        this._debouncedGenerateThumb(true);
+        this._once = true;
+      }
+    });
+
     this.setAttribute('role', 'img');
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.13",
+  "version": "1.15.0-alpha.14",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",