Issue #1441Opened September 19, 2018by ageir0 reactions

Drag image to canvas doesn't show image

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, 20180 reactions

@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, 20180 reactions

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.