Issue with summernote image upload

I am using summernote with image upload

I have the server action set

image

which is:
image
when I save the form with an image inserted :the image is base64 encoded and a separate image is not saved to the server.

I actually need this to be uploaded to an DO S3 space so it has to be a separate file
I am seeing no errors in the dev console nor do i see any evidence of the upload action running - should I expected to see it firing when the image is uploaded?

Any suggestions appreciated

Are you sure you have enabled the image upload toolbar/option and that you are not using the default image insert option of Summernote (which is available by default there)?

Sorry, hadn’t noticed that upload option initially.

i have now added that

image

but this does not cause an image upload icon to be added to the toolbar?

If i drag and drop the image is added but still encoded.

Guess i must still be missing something?

Are you not using the image upload button for this?

Screenshot 2021-04-21 at 16.55.17

That’s the issue, here is my toolbars setup including image upload

and server action
image

but no upload button shows

Do you see something like ['insert',['imageFile','link']] in the editor code?

Tried adding all the uploads,
image
still no toolbar buttons

Weird, are you sure your page is uploaded to the server?
What do you see when you inspect the source code of the page - do you see the same values for the ['insert'...]? Did you clear your browser cache?

It’s running on docker local, code looks ok

textarea id="inp_exercise" name="exercise" dmx-bind:value="conn_content.data.query.exercise" class="form-control" is="dmx-summernote"
                            dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear','italic']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['view',['fullscreen','codeview','help']],['insert',['link','imageFile','videoFile','audioFile','file']]]"
                            dmx-plugin:file="{imageUrl:'/api/admin/imagemanagement/summernote_upload_image'}"></textarea>

So that’s what you see in your browser when you inspect source, right?
Maybe try adding a new custom group and add these options there to see if it makes any difference? I can’t recreate this locally.

yes, that’s the source from the browser.(chrome)

Added another group (text color and text background,
**image **

shows as it should

(should mention this is node/ windows)

What if you add the file upload options in a separate group?
Do you see the toolbar properly in design view?
Also do you see any errors in the browser console?

No console errors I(first place i look :wink:

added this
image

Still no icon

I am going to completely remove the summernote input and re-create is and see what happens, will let you know. May just be one of those weird “combination of actions” type errors

OK, i removed the summernote input from that page and re-added it and the icon still did not show

I then used a different but almost identical page, added image upload and the icon does show

I guess I just put this down to some unfortunate combination of events. I will simply rebuild the other page, it’s simple enough.

Thanks again for your patience Teodor. I will compare the page structures of each and try and identify what has caused this.

1 Like

OK, Teodor, this is crazy but I think i have found the issue.

In the header on the working page read

components="{dmxNotifications:{},dmxSummernote:{},dmxSummernoteFileUpload:{}}" -->

In the non working page it read:

components="{dmxNotifications:{},dmxSummernoteFileUpload:{},dmxSummernote:{}}"

Note the reversed order of the dmxSummernote and dmxSummernoteFileUpload directives
Rearranging the order to that of the working page fixed the problem.

Not sure why the options are reversed as i certainly did not edit them but at least i believe I have identified the issue

Ah so its a content page, its good to mention this :slight_smile:

Maybe if you an recreate this and provide the exact steps to do this it will help us fix the issue.

Will do my best to find out why