From 7c30d290fa08fc62826109a880ea916ebd5e6500 Mon Sep 17 00:00:00 2001
From: nd0ut <nd0ut.me@gmail.com>
Date: Wed, 18 May 2022 22:21:26 +0300
Subject: [PATCH] fix(upload-details): render preview image with `format/auto`
 and `preview` operations

---
 blocks/FileItem/FileItem.js           |  1 +
 blocks/UploadDetails/UploadDetails.js | 28 ++++++++++-----------------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
index b8eea4530..f9ef5827f 100644
--- a/blocks/FileItem/FileItem.js
+++ b/blocks/FileItem/FileItem.js
@@ -287,6 +287,7 @@ export class FileItem extends Block {
         isImage: fileInfo.isImage,
         mimeType: fileInfo.mimeType,
         uuid: fileInfo.uuid,
+        cdnUrl: fileInfo.cdnUrl,
       });
     } catch (error) {
       this.entry.setValue('isUploading', false);
diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js
index aa6ff5b2e..b04445356 100644
--- a/blocks/UploadDetails/UploadDetails.js
+++ b/blocks/UploadDetails/UploadDetails.js
@@ -1,5 +1,5 @@
 import { Block } from '../../abstract/Block.js';
-import { createOriginalUrl } from '../../utils/cdn-utils.js';
+import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
 import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 
 /**
@@ -121,18 +121,6 @@ export class UploadDetails extends Block {
       tmpSub('fileSize', (size) => {
         this.$.fileSize = Number.isFinite(size) ? this.fileSizeFmt(size) : this.l10n('file-size-unknown');
       });
-      tmpSub('uuid', (uuid) => {
-        if (uuid) {
-          this.eCanvas.clear();
-          this.set$({
-            cdnUrl: createOriginalUrl(this.$['*--cfg-cdn-cname'], uuid),
-            cloudEditBtnHidden: !this.entry.getValue('isImage') || !this.$['*--cfg-use-cloud-image-editor'],
-          });
-          this.entry.getValue('isImage') && this.eCanvas.setImageUrl(this.$.cdnUrl);
-        } else {
-          this.$.cdnUrl = '';
-        }
-      });
       tmpSub('uploadError', (error) => {
         this.$.errorTxt = error?.message;
       });
@@ -145,12 +133,16 @@ export class UploadDetails extends Block {
           this.showNonImageThumb();
         }
       });
-      tmpSub('cdnUrl', (url) => {
-        if (!url) {
-          return;
-        }
+      tmpSub('cdnUrl', (cdnUrl) => {
+        this.set$({
+          cdnUrl,
+          cloudEditBtnHidden: !this.entry.getValue('isImage') || !this.$['*--cfg-use-cloud-image-editor'],
+        });
+
         if (this.entry.getValue('isImage')) {
-          this.eCanvas.setImageUrl(url);
+          // TODO: need to resize image to fit the canvas size
+          let imageUrl = createCdnUrl(cdnUrl, createCdnUrlModifiers('format/auto', 'preview'));
+          this.eCanvas.setImageUrl(imageUrl);
         }
       });
     });