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

package/blocks/FileItem/FileItem.d.ts

@@ -1,21 +1,6 @@
-export class FileItem extends UploaderBlock {
-    /** @private */
-    private _entrySubs;
-    /**
-     * @private
-     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-     */
-    private _entry;
+export class FileItem extends FileItemConfig {
     /** @private */
     private _renderedOnce;
-    /**
-     * @private
-     * @template {any[]} A
-     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-     * @param {T} fn
-     * @returns {(...args: A) => ReturnType<T>}
-     */
-    private _withEntry;
     init$: {
         uid: string;
         itemName: string;
@@ -62,12 +47,6 @@ export class FileItem extends UploaderBlock {
     private _calculateState;
     /** @private */
     private _debouncedCalculateState;
-    /**
-     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-     * @param {K} prop_
-     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-     */
-    _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
     _updateHint: (...args: any[]) => void;
     /**
      * @private
@@ -92,5 +71,5 @@ export namespace FileItem {
     let template: string;
     let activeInstances: Set<any>;
 }
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { FileItemConfig } from './FileItemConfig.js';
 //# sourceMappingURL=FileItem.d.ts.map

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAiBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IAEd,eAAe;IACf,sBAAsB;IAEtB;;;;;;OAMG;IACH,mBAYC;IAKC;;;;;;;;;;;;;;;;;;;;;;;+CAvCS,gBAAU;mCAIjB,gBAAU;6BAImB,2BAA2B;;wCAS5C,wCACE;;;;;;MAoDf;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAYG;IAEH,eAAe;IACf,iCAA0E;IAE1E;;;;OAIG;IACH,YAAa,OAHF,CAGO,EAAE,UAFT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAE5D,UAgBP;IAErB,sCAeE;IAEF;;;OAGG;IACH,uBAiCC;IAyDD,uCA+BE;IAaA,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,0CAqGG;CACJ;;;;;8BAnb6B,iCAAiC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAiBA;IAIE,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;+CAVoB,gBAAU;mCAIlB,gBACR;6BAMM,2BAET;;wCAMC,wCACK;;;;;;MAqBN;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAYG;IAEH,eAAe;IACf,iCAA0E;IAE1E,sCAeE;IAEF;;;OAGG;IACH,uBAiCC;IAyDD,uCA+BE;IAaA,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,0CAqGG;CACJ;;;;;+BA3X8B,qBAAqB"}

package/blocks/FileItem/FileItem.js

@@ -2,11 +2,11 @@
 import { shrinkFile } from '@uploadcare/image-shrink';
 import { CancelError, UploadcareError, uploadFile } from '@uploadcare/upload-client';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { debounce } from '../utils/debounce.js';
 import { parseShrink } from '../../utils/parseShrink.js';
 import { UploadSource } from '../utils/UploadSource.js';
 import { throttle } from '../utils/throttle.js';
+import { FileItemConfig } from './FileItemConfig.js';
 
 const FileItemState = Object.freeze({
   FINISHED: Symbol('FINISHED'),
@@ -15,42 +15,13 @@ const FileItemState = Object.freeze({
   IDLE: Symbol('IDLE'),
 });
 
-export class FileItem extends UploaderBlock {
+export class FileItem extends FileItemConfig {
   couldBeCtxOwner = true;
   pauseRender = true;
 
-  /** @private */
-  _entrySubs = new Set();
-  /**
-   * @private
-   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-   */
-  _entry = null;
-
   /** @private */
   _renderedOnce = false;
 
-  /**
-   * @private
-   * @template {any[]} A
-   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-   * @param {T} fn
-   * @returns {(...args: A) => ReturnType<T>}
-   */
-  _withEntry(fn) {
-    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
-      (...args) => {
-        const entry = this._entry;
-        if (!entry) {
-          console.warn('No entry found');
-          return;
-        }
-        return fn(entry, ...args);
-      }
-    );
-    return wrapperFn;
-  }
-
   constructor() {
     super();
 
@@ -132,29 +103,6 @@ export class FileItem extends UploaderBlock {
   /** @private */
   _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
 
-  /**
-   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-   * @param {K} prop_
-   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-   */
-  _subEntry = (prop_, handler_) =>
-    this._withEntry(
-      /**
-       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
-       * @param {K} prop
-       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
-       */
-      (entry, prop, handler) => {
-        let sub = entry.subscribe(prop, (value) => {
-          if (this.isConnected) {
-            handler(value);
-          }
-        });
-        this._entrySubs.add(sub);
-      },
-    )(prop_, handler_);
-
   _updateHint = this._withEntry(
     throttle((entry) => {
       const source = entry.getValue('source');

package/blocks/FileItem/FileItemConfig.d.ts

@@ -0,0 +1,26 @@
+export class FileItemConfig extends UploaderBlock {
+    /** @protected */
+    protected _entrySubs: Set<any>;
+    /**
+     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
+     * @protected
+     */
+    protected _entry: import("../../abstract/uploadEntrySchema.js").UploadEntryTypedData | null;
+    /**
+     * @template {any[]} A
+     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
+     * @param {T} fn
+     * @returns {(...args: A) => ReturnType<T>}
+     * @protected
+     */
+    protected _withEntry<A extends any[], T extends (entry: import("../../abstract/uploadEntrySchema.js").UploadEntryTypedData, ...args: A) => any>(fn: T): (...args: A) => ReturnType<T>;
+    /**
+     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+     * @param {K} prop_
+     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
+     * @protected
+     */
+    protected _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=FileItemConfig.d.ts.map

package/blocks/FileItem/FileItemConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItemConfig.d.ts","sourceRoot":"","sources":["FileItemConfig.js"],"names":[],"mappings":"AAIA;IACE,iBAAiB;IACjB,+BAAuB;IAEvB;;;OAGG;IACH,kBAHU,OAAO,qCAAqC,EAAE,oBAAoB,GAAG,IAAI,CAGrE;IAEd;;;;;;OAMG;IACH,qBANqB,CAAC,SAAR,GAAG,EAAG,EAC0F,CAAC,SAAlG,CAAE,KAAK,EAAE,OAAO,qCAAqC,EAAE,oBAAoB,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,GAAI,MAClG,CAAC,GACC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAezC;IAED;;;;;OAKG;IACH,sBAAa,OAJF,CAIO,EAAE,UAHT,CAAC,KAAK,EAAE,OAAO,qCAAqC,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAG5D,UAgBP;CAMtB;8BA7D6B,iCAAiC"}

package/blocks/FileItem/FileItemConfig.js

@@ -0,0 +1,64 @@
+//@ts-check
+
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+export class FileItemConfig extends UploaderBlock {
+  /** @protected */
+  _entrySubs = new Set();
+
+  /**
+   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
+   * @protected
+   */
+  _entry = null;
+
+  /**
+   * @template {any[]} A
+   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
+   * @param {T} fn
+   * @returns {(...args: A) => ReturnType<T>}
+   * @protected
+   */
+  _withEntry(fn) {
+    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
+      (...args) => {
+        const entry = this._entry;
+        if (!entry) {
+          console.warn('No entry found');
+          return;
+        }
+        return fn(entry, ...args);
+      }
+    );
+    return wrapperFn;
+  }
+
+  /**
+   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+   * @param {K} prop_
+   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
+   * @protected
+   */
+  _subEntry = (prop_, handler_) =>
+    this._withEntry(
+      /**
+       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
+       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
+       * @param {K} prop
+       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
+       */
+      (entry, prop, handler) => {
+        let sub = entry.subscribe(prop, (value) => {
+          if (this.isConnected) {
+            handler(value);
+          }
+        });
+        this._entrySubs.add(sub);
+      },
+    )(prop_, handler_);
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._entrySubs = new Set();
+  }
+}

package/blocks/Thumb/Thumb.d.ts

@@ -1,31 +1,12 @@
-export class Thumb extends UploaderBlock {
+export class Thumb extends FileItemConfig {
     /** @private */
-    private _entrySubs;
-    /**
-     * @private
-     * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-     */
-    private _entry;
+    private _renderedGridOnce;
     /**
      * @private
      * @type {IntersectionObserverEntry['boundingClientRect'] | null}
      */
     private _thumbRect;
     _isIntersecting: boolean;
-    /**
-     * @private
-     * @template {any[]} A
-     * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-     * @param {T} fn
-     * @returns {(...args: A) => ReturnType<T>}
-     */
-    private _withEntry;
-    /**
-     * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-     * @param {K} prop_
-     * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-     */
-    _subEntry: (prop_: K, handler_: (value: import("../../abstract/uploadEntrySchema.js").UploadEntryData[K]) => void) => void;
     init$: {
         thumbUrl: string;
         badgeIcon: string;
@@ -44,7 +25,9 @@ export class Thumb extends UploaderBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
-    _calculateThumbSize(): number;
+    /** @param {string} imageUrl */
+    loadImage(imageUrl: string): Promise<any>;
+    _calculateThumbSize(force?: boolean): number;
     /** @private */
     private _generateThumbnail;
     _debouncedGenerateThumb: ((...args: any[]) => Promise<void>) & {
@@ -60,5 +43,5 @@ export class Thumb extends UploaderBlock {
 export namespace Thumb {
     let template: string;
 }
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { FileItemConfig } from '../FileItem/FileItemConfig.js';
 //# sourceMappingURL=Thumb.d.ts.map

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,0BAA0B;IAE1B;;;OAGG;IACH,mBAAkB;IAElB,yBAAwB;IAKtB;;;;;;;+CAEU,gBACV;mCAMF,gBAAQ;6BAEa,2BACJ;;wCAKH,wCACD;;;;;;MAbV;IAGH,+BAA+B;IAC/B,oBADY,MAAM,gBAgBjB;IAED,6CAgBC;IAED,eAAe;IACf,2BA2CG;IAEH;;MAA4E;IAE5E;;;OAGG;IACH,0BAaC;IA4CC,4CAAuG;CAY1G;;;;+BAzL8B,+BAA+B"}

package/blocks/Thumb/Thumb.js

@@ -1,20 +1,14 @@
 //@ts-check
 
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
+import { FileItemConfig } from '../FileItem/FileItemConfig.js';
 import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
 import { generateThumb } from '../utils/resizeImage.js';
 
-export class Thumb extends UploaderBlock {
+export class Thumb extends FileItemConfig {
   /** @private */
-  _entrySubs = new Set();
-
-  /**
-   * @private
-   * @type {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData | null}
-   */
-  _entry = null;
+  _renderedGridOnce = false;
 
   /**
    * @private
@@ -24,50 +18,6 @@ export class Thumb extends UploaderBlock {
 
   _isIntersecting = false;
 
-  /**
-   * @private
-   * @template {any[]} A
-   * @template {(entry: import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData, ...args: A) => any} T
-   * @param {T} fn
-   * @returns {(...args: A) => ReturnType<T>}
-   */
-  _withEntry(fn) {
-    const wrapperFn = /** @type {(...args: A) => ReturnType<T>} */ (
-      (...args) => {
-        const entry = this._entry;
-        if (!entry) {
-          console.warn('No entry found');
-          return;
-        }
-        return fn(entry, ...args);
-      }
-    );
-    return wrapperFn;
-  }
-
-  /**
-   * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-   * @param {K} prop_
-   * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler_
-   */
-  _subEntry = (prop_, handler_) =>
-    this._withEntry(
-      /**
-       * @template {import('../../abstract/uploadEntrySchema.js').UploadEntryKeys} K
-       * @param {import('../../abstract/uploadEntrySchema.js').UploadEntryTypedData} entry
-       * @param {K} prop
-       * @param {(value: import('../../abstract/uploadEntrySchema.js').UploadEntryData[K]) => void} handler
-       */
-      (entry, prop, handler) => {
-        let sub = entry.subscribe(prop, (value) => {
-          if (this.isConnected) {
-            handler(value);
-          }
-        });
-        this._entrySubs.add(sub);
-      },
-    )(prop_, handler_);
-
   constructor() {
     super();
 
@@ -79,7 +29,29 @@ export class Thumb extends UploaderBlock {
     };
   }
 
-  _calculateThumbSize() {
+  /** @param {string} imageUrl */
+  loadImage(imageUrl) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        this.set$({ thumbUrl: `url(${imageUrl})` });
+        resolve(true);
+        img.remove();
+      };
+      img.onerror = () => {
+        console.error('Failed to load image:', imageUrl);
+        reject(new Error(`Failed to load image: ${imageUrl}`));
+        img.remove();
+      };
+      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 +66,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 +79,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 +161,13 @@ export class Thumb extends UploaderBlock {
       }
     });
 
+    this.subConfigValue('filesViewMode', (viewMode) => {
+      if (!this._renderedGridOnce && viewMode === 'grid') {
+        this._debouncedGenerateThumb(true);
+        this._renderedGridOnce = 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.15",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",