feat(admin/image): resize on image from server (ems-project#969)

Co-authored-by: David mattei <[email protected]>

EMS/core-bundle/assets/js/EmsListeners.js

@@ -484,7 +484,7 @@ export default class EmsListeners {
         const uploadTab = mainDiv.find(".asset-upload-tab");
         const previewLink = mainDiv.find(".img-responsive");
         sha1Input.val(data.sha1);
-        resizedImageHashInput.val('');
+        resizedImageHashInput.val(data._image_resized_hash ?? '');
         assetHashSignature.empty().append(data.sha1);
         typeInput.val(data.mimetype);
         nameInput.val(data.filename);

EMS/core-bundle/assets/js/module/pickFileFromServer.js

@@ -1,5 +1,6 @@
 import {pickFileModal} from "../helper/ajaxModal";
 import {observeDom} from '../helper/observeDom';
+import {resizeImage} from "../helper/resizeImage";
 
 export default class PickFileFromServer {
     constructor(target) {
@@ -20,15 +21,36 @@ export default class PickFileFromServer {
             const addClickCallbacks = function(linkList){
                 for (let i = 0; i < linkList.length; i++) {
                     linkList[i].onclick = (event) => {
+                        const primaryBox = $('body')
+                        const initUpload = primaryBox.data('init-upload')
+                        const hashAlgo = primaryBox.data('hash-algo');
                         if (event.target.parentNode === undefined || event.target.parentNode.dataset.json === undefined) {
                             return;
                         }
                         event.preventDefault();
                         const data =  JSON.parse(event.target.parentNode.dataset.json)
-                        const row = button.closest('.file-uploader-row');
-                        row.dispatchEvent(new CustomEvent('updateAssetData', {detail: data}));
-                        pickFileModal.close();
-                        observer.disconnect();
+                        fetch(data.view_url, {mode: 'cors'})
+                            .then(res => res.blob())
+                            .then(blob => {
+                                blob.name = data.filename
+                                return resizeImage(hashAlgo, initUpload, blob)
+                            })
+                            .then((response) => {
+                                if (null === response) {
+                                    return
+                                }
+                                data._image_resized_hash = response.hash
+                                data.preview_url = response.url
+                            })
+                            .catch((errorMessage) => {
+                                console.error(errorMessage)
+                            })
+                            .finally(() => {
+                                const row = button.closest('.file-uploader-row');
+                                row.dispatchEvent(new CustomEvent('updateAssetData', {detail: data}));
+                                pickFileModal.close();
+                                observer.disconnect();
+                            })
                     };
                 }
             }
@@ -47,4 +69,4 @@ export default class PickFileFromServer {
             });
         });
     }
-}
+}

EMS/core-bundle/src/Resources/public/manifest.json

@@ -24,25 +24,25 @@
   "yellow-light.css": "bundles/emscore/css/yellow-light.d49e5306580cfb1f6833.css",
   "yellow-light.js": "bundles/emscore/js/yellow-light.31d6cfe0d16ae931b73c.js",
   "app.css": "bundles/emscore/css/app.f1b15f85062893311983.css",
-  "app.js": "bundles/emscore/js/app.8fb8b85081d3e9e0e472.js",
+  "app.js": "bundles/emscore/js/app.60c10e2a4feed78c5a10.js",
   "edit-revision.css": "bundles/emscore/css/edit-revision.f1b15f85062893311983.css",
-  "edit-revision.js": "bundles/emscore/js/edit-revision.bf6c9615927e0db6d227.js",
+  "edit-revision.js": "bundles/emscore/js/edit-revision.be4065f8965c9135d81e.js",
   "managed-alias.css": "bundles/emscore/css/managed-alias.e08dcc1df058e680457e.css",
-  "managed-alias.js": "bundles/emscore/js/managed-alias.2bfc8f4c78de1204af23.js",
+  "managed-alias.js": "bundles/emscore/js/managed-alias.8c0ab028134685f9f277.js",
   "user-profile.css": "bundles/emscore/css/user-profile.e08dcc1df058e680457e.css",
-  "user-profile.js": "bundles/emscore/js/user-profile.1cc2ec2b905396a677f8.js",
+  "user-profile.js": "bundles/emscore/js/user-profile.28644054c4e2d7a41622.js",
   "template.css": "bundles/emscore/css/template.e08dcc1df058e680457e.css",
-  "template.js": "bundles/emscore/js/template.e392bb7bfad0f5893a46.js",
+  "template.js": "bundles/emscore/js/template.7a05efeb4c4e6b27ff4d.js",
   "hierarchical.css": "bundles/emscore/css/hierarchical.e08dcc1df058e680457e.css",
-  "hierarchical.js": "bundles/emscore/js/hierarchical.e2cd37cf71443be63807.js",
+  "hierarchical.js": "bundles/emscore/js/hierarchical.3f571086b2a09c69062a.js",
   "calendar.css": "bundles/emscore/css/calendar.e08dcc1df058e680457e.css",
-  "calendar.js": "bundles/emscore/js/calendar.19a0c36c42e09eb299a4.js",
+  "calendar.js": "bundles/emscore/js/calendar.cb33537109a246284adc.js",
   "criteria-view.css": "bundles/emscore/css/criteria-view.e08dcc1df058e680457e.css",
-  "criteria-view.js": "bundles/emscore/js/criteria-view.384d7cf446912aed6563.js",
+  "criteria-view.js": "bundles/emscore/js/criteria-view.afc4dcc419a0eb61e118.js",
   "criteria-table.css": "bundles/emscore/css/criteria-table.e08dcc1df058e680457e.css",
-  "criteria-table.js": "bundles/emscore/js/criteria-table.e6d8cbf441c4a95b8383.js",
+  "criteria-table.js": "bundles/emscore/js/criteria-table.cc233698b6c23236b64d.js",
   "i18n.css": "bundles/emscore/css/i18n.e08dcc1df058e680457e.css",
-  "i18n.js": "bundles/emscore/js/i18n.1a245a4825a0a2a88a6b.js",
+  "i18n.js": "bundles/emscore/js/i18n.aad4cfca28a796e84e01.js",
   "dashboard-browser.css": "bundles/emscore/css/dashboard-browser.0ca4a46888d56dc2418f.css",
   "dashboard-browser.js": "bundles/emscore/js/dashboard-browser.b827d809f0a027d92b63.js",
   "js/ace/worker-xquery.js": "bundles/emscore/js/ace/worker-xquery.js",