@uploadcare/file-uploader 1.15.0-alpha.2 → 1.15.0-alpha.21

package/blocks/FileItem/FileItem.js

@@ -1,15 +1,12 @@
 // @ts-check
-import { CancelError, uploadFile } from '@uploadcare/upload-client';
 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 { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
-import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
-import { generateThumb } from '../utils/resizeImage.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'),
@@ -18,24 +15,10 @@ 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 {any} TODO: Add types for upload entry
-   */
-  _entry = null;
-  /** @private */
-  _isIntersecting = false;
-  /** @private */
-  _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
-  /** @private */
-  _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
-
   /** @private */
   _renderedOnce = false;
 
@@ -57,16 +40,16 @@ export class FileItem extends UploaderBlock {
       isUploading: false,
       isFocused: false,
       isEditable: false,
-      isFileName: false,
+      showFileNames: false,
       state: FileItemState.IDLE,
       ariaLabelStatusFile: '',
-      onEdit: () => {
+      onEdit: this._withEntry((entry) => {
         this.$['*currentActivityParams'] = {
-          internalId: this._entry.uid,
+          internalId: entry.uid,
         };
         this.modalManager.open(ActivityBlock.activities.CLOUD_IMG_EDIT);
         this.$['*currentActivity'] = ActivityBlock.activities.CLOUD_IMG_EDIT;
-      },
+      }),
       onRemove: () => {
         this.uploadCollection.remove(this.$.uid);
       },
@@ -77,14 +60,8 @@ export class FileItem extends UploaderBlock {
   }
 
   _reset() {
-    for (let sub of this._entrySubs) {
-      sub.remove();
-    }
-
-    this._debouncedGenerateThumb.cancel();
+    super._reset();
     this._debouncedCalculateState.cancel();
-    this._entrySubs = new Set();
-    this._entry = null;
   }
 
   /**
@@ -93,6 +70,7 @@ export class FileItem extends UploaderBlock {
    */
   _observerCallback(entries) {
     let [entry] = entries;
+
     this._isIntersecting = entry.isIntersecting;
     this._thumbRect = entry.boundingClientRect;
 
@@ -100,19 +78,10 @@ export class FileItem extends UploaderBlock {
       this.render();
       this._renderedOnce = true;
     }
-    if (entry.intersectionRatio === 0) {
-      this._debouncedGenerateThumb.cancel();
-    } else {
-      this._debouncedGenerateThumb();
-    }
   }
 
   /** @private */
-  _calculateState() {
-    if (!this._entry) {
-      return;
-    }
-    let entry = this._entry;
+  _calculateState = this._withEntry((entry) => {
     let state = FileItemState.IDLE;
 
     if (entry.getValue('errors').length > 0) {
@@ -124,85 +93,40 @@ export class FileItem extends UploaderBlock {
     }
 
     this.$.state = state;
-  }
+  });
 
   /** @private */
-  async _generateThumbnail() {
-    if (!this._entry) {
-      return;
-    }
-    let entry = this._entry;
-
-    if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      let size = Math.max(
-        parseInt(String(this?._thumbRect?.height || 0)),
-        parseInt(String(this?._thumbRect?.width || 0)),
-        this.cfg.thumbSize,
-      );
-
-      let thumbUrl = await this.proxyUrl(
-        createCdnUrl(
-          createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
-          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);
-      }
-      return;
-    }
-
-    if (entry.getValue('thumbUrl')) {
-      return;
-    }
+  _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
 
-    if (entry.getValue('file')?.type.includes('image')) {
-      try {
-        let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
-        entry.setValue('thumbUrl', thumbUrl);
-      } catch (err) {
-        let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
-        entry.setValue('thumbUrl', fileCssBg(color));
+  _updateHint = this._withEntry(
+    throttle((entry) => {
+      const source = entry.getValue('source');
+      const externalUrl = entry.getValue('externalUrl');
+      const noErrors = entry.getValue('errors').length === 0;
+      const noProgress = this.$.progressValue === 0;
+      const isUploading = this.$.state === FileItemState.UPLOADING;
+      const isQueued = entry.getValue('isQueued');
+
+      if (!noErrors || !isUploading || !noProgress) {
+        this.$.hint = '';
+        return;
       }
-    } else {
-      let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
-      entry.setValue('thumbUrl', fileCssBg(color));
-    }
-  }
 
-  /**
-   * @private
-   * @param {string} prop
-   * @param {(value: any) => void} handler
-   */
-  _subEntry(prop, handler) {
-    let sub = this._entry.subscribe(
-      prop,
-      /** @param {any} value */ (value) => {
-        if (this.isConnected) {
-          handler(value);
-        }
-      },
-    );
-    this._entrySubs.add(sub);
-  }
-
-  _updateHint = throttle(() => {
-    const showHint =
-      this.$.state === FileItemState.UPLOADING &&
-      this._entry.getValue('externalUrl') &&
-      this._entry.getValue('source') !== UploadSource.URL &&
-      this._entry.getValue('errors').length === 0 &&
-      this.$.progressValue === 0;
+      if (isQueued) {
+        const hint = this.l10n('queued');
+        this.$.hint = hint;
+        return;
+      }
 
-    const hint = showHint
-      ? this.l10n('waiting-for', { source: this.l10n(`src-type-${this._entry.getValue('source')}`) })
-      : '';
+      if (externalUrl && source && source !== UploadSource.URL) {
+        const hint = this.l10n('waiting-for', { source: this.l10n(`src-type-${source}`) });
+        this.$.hint = hint;
+        return;
+      }
 
-    this.$.hint = hint;
-  }, 100);
+      this.$.hint = '';
+    }, 100),
+  );
 
   /**
    * @private
@@ -211,7 +135,6 @@ export class FileItem extends UploaderBlock {
   _handleEntryId(id) {
     this._reset();
 
-    /** @type {import('../../abstract/TypedData.js').TypedData} */
     let entry = this.uploadCollection?.read(id);
     this._entry = entry;
 
@@ -224,6 +147,10 @@ export class FileItem extends UploaderBlock {
       this._updateHint();
     });
 
+    this._subEntry('isQueued', () => {
+      this._updateHint();
+    });
+
     this._subEntry('fileName', (name) => {
       this.$.itemName = name || entry.getValue('externalUrl') || this.l10n('file-no-name');
       this._debouncedCalculateState();
@@ -233,21 +160,8 @@ export class FileItem extends UploaderBlock {
       this.$.itemName = entry.getValue('fileName') || externalUrl || this.l10n('file-no-name');
     });
 
-    this._subEntry('fileInfo', (fileInfo) => {
+    this._subEntry('fileInfo', () => {
       this._debouncedCalculateState();
-      if (fileInfo && this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('cdnUrlModifiers', () => {
-      if (this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('thumbUrl', (thumbUrl) => {
-      this.$.thumbUrl = thumbUrl ? `url(${thumbUrl})` : '';
     });
 
     this._subEntry('errors', () => this._debouncedCalculateState());
@@ -255,10 +169,17 @@ export class FileItem extends UploaderBlock {
     this._subEntry('fileSize', () => this._debouncedCalculateState());
     this._subEntry('mimeType', () => this._debouncedCalculateState());
     this._subEntry('isImage', () => this._debouncedCalculateState());
+  }
 
-    if (this._isIntersecting) {
-      this._debouncedGenerateThumb();
+  /** @param {boolean} value */
+  _updateShowFileNames(value) {
+    const isListMode = this.cfg.filesViewMode === 'list';
+    if (isListMode) {
+      this.$.showFileNames = true;
+      return;
     }
+
+    this.$.showFileNames = value;
   }
 
   initCallback() {
@@ -273,14 +194,17 @@ export class FileItem extends UploaderBlock {
     });
 
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
-    this.subConfigValue('displayUploadList', (mode) => {
-      if (mode === 'grid') {
-        this.subConfigValue('enableFileName', (value) => (this.$.isFileName = !value));
-      }
+
+    this.subConfigValue('filesViewMode', (mode) => {
+      this._updateShowFileNames(this.cfg.gridShowFileNames);
 
       this.setAttribute('mode', mode);
     });
 
+    this.subConfigValue('gridShowFileNames', (value) => {
+      this._updateShowFileNames(value);
+    });
+
     this.onclick = () => {
       FileItem.activeInstances.forEach((inst) => {
         if (inst === this) {
@@ -295,7 +219,7 @@ export class FileItem extends UploaderBlock {
       '*uploadTrigger',
       /** @param {Set<string>} itemsToUpload */
       (itemsToUpload) => {
-        if (!itemsToUpload.has(this._entry.uid)) {
+        if (this._entry && !itemsToUpload.has(this._entry.uid)) {
           return;
         }
         setTimeout(() => this.isConnected && this.upload());
@@ -304,33 +228,38 @@ export class FileItem extends UploaderBlock {
     FileItem.activeInstances.add(this);
   }
 
-  /** @param {(typeof FileItemState)[keyof typeof FileItemState]} state */
-  _handleState(state) {
-    if (state === FileItemState.FAILED) {
-      this.$.badgeIcon = 'badge-error';
-    } else if (state === FileItemState.FINISHED) {
-      this.$.badgeIcon = 'badge-success';
-    }
-
-    if (state === FileItemState.UPLOADING) {
-      this.$.isFocused = false;
-    }
+  _handleState = this._withEntry(
+    /** @param {(typeof FileItemState)[keyof typeof FileItemState]} state */
+    (entry, state) => {
+      if (state === FileItemState.FAILED) {
+        this.$.badgeIcon = 'badge-error';
+      } else if (state === FileItemState.FINISHED) {
+        this.$.badgeIcon = 'badge-success';
+      }
 
-    this.set$({
-      isFailed: state === FileItemState.FAILED,
-      isUploading: state === FileItemState.UPLOADING,
-      isFinished: state === FileItemState.FINISHED,
-      progressVisible: state === FileItemState.UPLOADING,
-      isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
-      errorText: this._entry.getValue('errors')?.[0]?.message,
-      ariaLabelStatusFile: this.l10n('a11y-file-item-status', {
-        fileName: this._entry?.getValue('fileName'),
-        status: this.l10n(state?.description?.toLocaleLowerCase() ?? '').toLocaleLowerCase(),
-      }),
-    });
+      if (state === FileItemState.UPLOADING) {
+        this.$.isFocused = false;
+      }
+      const fileName = entry.getValue('fileName');
+
+      this.set$({
+        isFailed: state === FileItemState.FAILED,
+        isUploading: state === FileItemState.UPLOADING,
+        isFinished: state === FileItemState.FINISHED,
+        progressVisible: state === FileItemState.UPLOADING,
+        isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
+        errorText: entry.getValue('errors')?.[0]?.message,
+        ariaLabelStatusFile:
+          fileName &&
+          this.l10n('a11y-file-item-status', {
+            fileName,
+            status: this.l10n(state?.description?.toLocaleLowerCase() ?? '').toLocaleLowerCase(),
+          }),
+      });
 
-    this._updateHint();
-  }
+      this._updateHint();
+    },
+  );
 
   destroyCallback() {
     super.destroyCallback();
@@ -353,7 +282,6 @@ export class FileItem extends UploaderBlock {
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this._debouncedGenerateThumb.cancel();
     this._observer?.disconnect();
   }
 
@@ -369,9 +297,7 @@ export class FileItem extends UploaderBlock {
     return shrinkFile(file, this._settingsOfShrink());
   }
 
-  async upload() {
-    let entry = this._entry;
-
+  upload = this._withEntry(async (entry) => {
     if (!this.uploadCollection.read(entry.uid)) {
       return;
     }
@@ -385,26 +311,35 @@ export class FileItem extends UploaderBlock {
     }
 
     this._debouncedCalculateState();
-    entry.setValue('isUploading', true);
-    entry.setValue('errors', []);
+
+    entry.setMultipleValues({
+      isUploading: true,
+      errors: [],
+      isQueued: true,
+    });
 
     try {
       let abortController = new AbortController();
       entry.setValue('abortController', abortController);
 
       const uploadTask = async () => {
+        entry.setValue('isQueued', false);
+        /** @type {Blob | File | null} */
         let file = entry.getValue('file');
         if (file && this.cfg.imageShrink) {
-          file = await this._processShrink(file).catch(() => file);
+          file = await this._processShrink(/** @type {File} */ (file)).catch(() => file);
         }
 
         const fileInput = file || entry.getValue('externalUrl') || entry.getValue('uuid');
+        if (!fileInput) {
+          throw new Error('No file input');
+        }
         const baseUploadClientOptions = await this.getUploadClientOptions();
         /** @type {import('@uploadcare/upload-client').FileFromOptions} */
         const uploadClientOptions = {
           ...baseUploadClientOptions,
-          fileName: entry.getValue('fileName'),
-          source: entry.getValue('source'),
+          fileName: entry.getValue('fileName') ?? undefined,
+          source: entry.getValue('source') ?? undefined,
           onProgress: (progress) => {
             if (progress.isComputable) {
               let percentage = progress.value * 100;
@@ -422,10 +357,11 @@ export class FileItem extends UploaderBlock {
       let fileInfo = await this.$['*uploadQueue'].add(uploadTask);
       entry.setMultipleValues({
         fileInfo,
+        isQueued: false,
         isUploading: false,
         fileName: fileInfo.originalFilename,
         fileSize: fileInfo.size,
-        isImage: fileInfo.isImage,
+        isImage: fileInfo.isImage ?? false,
         mimeType: fileInfo.contentInfo?.mime?.mime ?? fileInfo.mimeType,
         uuid: fileInfo.uuid,
         cdnUrl: entry.getValue('cdnUrl') ?? fileInfo.cdnUrl,
@@ -443,30 +379,37 @@ export class FileItem extends UploaderBlock {
           isUploading: false,
           uploadProgress: 0,
         });
-      } else {
+      } else if (cause instanceof UploadcareError) {
         entry.setMultipleValues({
           isUploading: false,
           uploadProgress: 0,
           uploadError: cause,
         });
+      } else {
+        console.error('Unknown upload error', cause);
+        entry.setMultipleValues({
+          isUploading: false,
+          uploadProgress: 0,
+          // TODO: Add translation?
+          uploadError: new Error('Something went wrong', {
+            cause,
+          }),
+        });
       }
 
       if (entry === this._entry) {
         this._debouncedCalculateState();
       }
     }
-  }
+  });
 }
 
 FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
-      <div class="uc-badge">
-        <uc-icon set="@name: badgeIcon"></uc-icon>
-      </div>
-    </div>
+    <uc-thumb set="uid:uid;badgeIcon:badgeIcon"></uc-thumb>
+
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name" set="@hidden: isFileName">{{itemName}}</span>
+      <span class="uc-file-name" set="@hidden: !showFileNames">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>
       <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
@@ -491,7 +434,11 @@ FileItem.template = /* HTML */ `
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar
+      class="uc-progress-bar"
+      set="value: progressValue; visible: progressVisible; @hasFileName: showFileNames;"
+    >
+    </uc-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();

package/blocks/FileItem/FileItemConfig.d.ts

@@ -0,0 +1,28 @@
+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;
+    /** @protected */
+    protected _reset(): 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;IAErB,iBAAiB;IACjB,yBAOC;CAMF;8BAvE6B,iCAAiC"}

package/blocks/FileItem/FileItemConfig.js

@@ -0,0 +1,74 @@
+//@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_);
+
+  /** @protected */
+  _reset() {
+    for (let sub of this._entrySubs) {
+      sub.remove();
+    }
+
+    this._entrySubs = new Set();
+    this._entry = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._entrySubs = new Set();
+  }
+}

package/blocks/FileItem/file-item.css

@@ -74,6 +74,7 @@ uc-file-item .uc-file-error {
   display: none;
   color: var(--uc-destructive-foreground);
   font-size: 0.85em;
+  z-index: 2;
 }
 
 uc-file-item button.uc-remove-btn,
@@ -193,6 +194,17 @@ uc-file-item[mode='grid'] .uc-file-error {
   padding: calc(var(--uc-padding) / 2) var(--uc-padding);
 }
 
+uc-file-item[mode='grid'] .uc-file-hint {
+  position: absolute;
+  background-color: var(--uc-background);
+  border-radius: var(--uc-radius);
+  color: var(--uc-foreground);
+  bottom: calc(var(--uc-padding) * 2);
+  left: var(--uc-padding);
+  right: var(--uc-padding);
+  padding: calc(var(--uc-padding) / 2) var(--uc-padding);
+}
+
 uc-file-item[mode='grid'] .uc-file-actions {
   position: absolute;
   top: var(--uc-padding);
@@ -202,3 +214,30 @@ uc-file-item[mode='grid'] .uc-file-actions {
 uc-file-item[mode='grid'] button {
   background-color: var(--uc-background);
 }
+
+uc-file-item[mode='grid'] button:hover {
+  background-color: var(--uc-muted);
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar {
+  width: initial;
+  height: 4px !important;
+  top: initial !important;
+  bottom: var(--uc-padding);
+  left: var(--uc-padding);
+  right: var(--uc-padding);
+  border-radius: var(--uc-radius);
+  z-index: 1;
+  transition:
+    background-color 0.3s,
+    opacity 0.3s;
+  background-color: var(--uc-background);
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
+  background-color: var(--uc-primary);
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar[hasfilename] {
+  bottom: calc(var(--uc-padding) + var(--uc-font-size));
+}