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)
@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);
}
});
Because of your custom uploadFile (why not using just the original???), you're not calling the callback https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/FileUploader.js#L105
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.
Issue #1418
[BUG?] Asset manager not deleting files on server unless upload triggered.
Running latest version (0.14.29) on local server. Using the example webpage preset. Ubuntu 18.04, Chromium 68. Assetmanager init: And exten...
Issue #1369
[BUG] Class of a block doesn't always show in the classes section
Hello everyone, I have added many custom blocks and gave the same css class to all the images in those blocks. Let's call it for now 'image...
Issue #1715
Hello, I am new to your project, but I love it. I have a small issue with image attributes.
I added two new traits to the trait manager for images. Width and height. I added it as a plugin following your example. It totally works a...
Issue #861
[Question] Help adding images to the canvas
I've followed the docs and have been able to upload images. When I drag an image block (using the newsletter preset) and select an image fr...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.