Issue #1441💬 AnsweredOpened September 19, 2018by ageir0 reactions

Drag image to canvas doesn't show image

快速解答by JulyanoF

@ageir I did some different (for file upload): and and for list images:

Read full answer below ↓

Question

Running latest version (0.14.29) on local server. Using the example webpage preset. Ubuntu 18.04, Chromium 69.

I got a problem dragging images to the canvas. I'm using a php backend. The image is uploaded and added to the assetmanager but the image doesn't show up in the canvas, only the missing file icon and the name of the file uploaded.

I'm using the demo page as a base. https://grapesjs.com/demo.html To test it replace asset manager in that file with:

// all_files is actually loaded via php, but the same error occurs if set to empty for testing.
var all_files = [];

		assetManager: {
			storageType: '',
			storeOnChange: true,
			storeAfterUpload: true,
			embedAsBase64: false,
			assets: all_files,
			noAssets: 'No assets here, drag to upload!',
			uploadFile: function (e) {
				console.log(arguments);
				var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
				var formData = new FormData();
				for (var i in files) {
					formData.append('file-' + i, files[i]);
				}
				$.ajax({
					url: '/file_upload',
					type: 'POST',
					data: formData,
					contentType: false,
					crossDomain: true,
					dataType: 'json',
					mimeType: "multipart/form-data",
					processData: false,
					success: function (result) {
						var images = result['data'];
						editor.AssetManager.add(images);
					}
				});
			},

			headers: {},
			params: {},
			autoAdd: 1,
			uploadText: 'Drop files here or click to upload.',
			addBtnText: 'Add image',
			dropzone: 0,
			openAssetsOnDrop: 0,
			dropzoneContent: '<div class="dropzone-inner">Drop media here.</div>',
			modalTitle: 'Select Image',
		},

The response from the server on upload looks like this: {"data":[{"id":"641","name":"myfile.jpg","type":"image","src":"\/remote\/file\/641","height":"0","width":"0"}]}

The element added to the canvas looks like this: <img data-gjs-type="image" alt="myfile.jpg" class="gjs-plh-image gjs-comp-selected" onmousedown="return false">

It's missing the src for the image.

Any idea what I'm doing wrong?

By the way, if i use the demo with local storage the drag n drop is working perfectly and the image is showing up.

Answers (3)

JulyanoFSeptember 19, 2018

@ageir I did some different (for file upload):

assetManager: {
        upload: 'addImageEndPoint.php',
        autoAdd: true,
    },

and

editor.on('asset:upload:response',function (response) {
    editor.AssetManager.add(response);
});

and for list images:

$.ajax({url: 'listImagesEndPoint.php',
      type: 'get',
      dataType: 'json',
      success: function(result){
          editor.AssetManager.add(result);
      }
});
mathiasbcNovember 28, 2018

HI @artf,

I have the same issue, my configuration looks like this:

      assetManager: {
        upload: 'http://my-url.net/upload',
        // custom function to handle uploads
        uploadFile(e, clb) {
          const files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
          this.onUploadStart();
          return fileUpload(this.config.upload, {file: files[0]})
            .then((data) => editor.AssetManager.add({src: data.file, type: 'image'}))
            .then((text) => this.onUploadResponse(text, clb))
            .catch((err) => this.onUploadError(err));
        },
      },

This function works alright, I can actually upload images and they will show in the asset manager. For the image block I have:

const bm = editor.BlockManager;
bm.add('image', {
      label: 'Image',
      category: '',
      attributes: {class:'gjs-fonts gjs-f-image'},
      content: {
        type:'image',
        style: {color:'black'},
        activeOnRender: 1
      },
    });

Which is directly copied from the newsletter plugin. Now, when I drag to image block to the canvas and double click on the desired image, the Component gets added but I get src: '' so no image is shown. Any ideas ?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.