Fix external D&D for image components. Closes #4094

src/asset_manager/index.js

@@ -360,14 +360,8 @@ export default () => {
       const toRender = assts || this.getAll().models;
 
       if (!am) {
-        const obj = {
-          collection: assetsVis, // Collection visible in asset manager
-          globalCollection: assets,
-          config: c,
-          module: this,
-        };
-        fu = new FileUpload(obj);
-        obj.fu = fu;
+        const obj = this.__viewParams();
+        obj.fu = this.FileUploader();
         const el = am && am.el;
         am = new AssetsView({
           el,
@@ -380,6 +374,15 @@ export default () => {
       return this.getContainer();
     },
 
+    __viewParams() {
+      return {
+        collection: assetsVis, // Collection visible in asset manager
+        globalCollection: assets,
+        config: c,
+        module: this,
+      };
+    },
+
     /**
      * Add new type. If you want to get more about type definition we suggest to read the [module's page](/modules/Assets.html)
      * @param {string} id Type ID
@@ -425,6 +428,9 @@ export default () => {
     },
 
     FileUploader() {
+      if (!fu) {
+        fu = new FileUpload(this.__viewParams());
+      }
       return fu;
     },
 

src/dom_components/view/ComponentImageView.js

@@ -9,7 +9,7 @@ export default ComponentView.extend({
     click: 'initResize',
     error: 'onError',
     load: 'onLoad',
-    dragstart: 'noDrag'
+    dragstart: 'noDrag',
   },
 
   initialize(o) {
@@ -24,21 +24,16 @@ export default ComponentView.extend({
    */
   fetchFile() {
     if (this.modelOpt.temporary) return;
-    const model = this.model;
+    const { model, em } = this;
     const file = model.get('file');
 
-    if (file) {
-      const fu = this.em.get('AssetManager').FileUploader();
-      fu.uploadFile(
-        {
-          dataTransfer: { files: [file] }
-        },
-        res => {
-          const obj = res && res.data && res.data[0];
-          const src = obj && (isString(obj) ? obj : obj.src);
-          src && model.set({ src });
-        }
-      );
+    if (file && em) {
+      const fu = em.get('AssetManager').FileUploader();
+      fu?.uploadFile({ dataTransfer: { files: [file] } }, res => {
+        const obj = res && res.data && res.data[0];
+        const src = obj && (isString(obj) ? obj : obj.src);
+        src && model.set({ src });
+      });
       model.set('file', '');
     }
   },
@@ -73,7 +68,7 @@ export default ComponentView.extend({
         },
         target: model,
         types: ['image'],
-        accept: 'image/*'
+        accept: 'image/*',
       });
     }
   },
@@ -103,5 +98,5 @@ export default ComponentView.extend({
     this.postRender();
 
     return this;
-  }
+  },
 });