fix: do not load preview image from cdn if no cdn modifiers applied

uploadcare · Mar 5, 2024 · e396ee5 · e396ee5
1 parent 77a70eb
commit e396ee5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/abstract/uploadEntrySchema.js b/abstract/uploadEntrySchema.js
@@ -103,6 +103,10 @@ export const uploadEntrySchema = Object.freeze({
     value: null,
     nullable: true,
   },
+  isFailedToGenerateThumb: {
+    type: Boolean,
+    value: false,
+  },
   silent: {
     type: Boolean,
     value: false,

diff --git a/blocks/Config/initialConfig.js b/blocks/Config/initialConfig.js
@@ -24,7 +24,7 @@ export const initialConfig = {
   sourceList: 'local, url, camera, dropbox, gdrive',
   cloudImageEditorTabs: serializeCsv(ALL_TABS),
   maxLocalFileSizeBytes: 0,
-  thumbSize: 76,
+  thumbSize: 64,
   showEmptyList: false,
   useLocalImageEditor: false,
   useCloudImageEditor: true,

diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
@@ -129,39 +129,45 @@ export class FileItem extends UploaderBlock {
     if (!this._entry) {
       return;
     }
-    let entry = this._entry;
-
-    if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      let size = this.cfg.thumbSize;
-      let thumbUrl = this.proxyUrl(
+    const entry = this._entry;
+
+    if (
+      entry.getValue('fileInfo') &&
+      entry.getValue('isImage') &&
+      (entry.getValue('cdnUrlModifiers') || entry.getValue('isFailedToGenerateThumb'))
+    ) {
+      const size = this.cfg.thumbSize;
+      const cdnThumbUrl = 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);
+      const currentThumbUrl = entry.getValue('thumbUrl');
+      if (currentThumbUrl !== cdnThumbUrl) {
+        entry.setValue('thumbUrl', cdnThumbUrl);
         currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
       }
       return;
     }
 
+    if (!entry.getValue('isImage')) {
+      const iconColor = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+      entry.setValue('thumbUrl', fileCssBg(iconColor));
+      return;
+    }
+
     if (entry.getValue('thumbUrl')) {
       return;
     }
 
-    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('--clr-generic-file-icon');
-        entry.setValue('thumbUrl', fileCssBg(color));
-      }
-    } else {
-      let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
+    try {
+      const thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
+      entry.setValue('thumbUrl', thumbUrl);
+    } catch (err) {
+      const color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
       entry.setValue('thumbUrl', fileCssBg(color));
+      entry.setValue('isFailedToGenerateThumb', true);
     }
   }