Wysiwyg-editor: Disable Image/File drag-drop and upload feature

[ishaaggarwal]

I am using froala 1.2.7 and want to disable the image/file drag and drop and upload functionality for my app.
I tried setting options 'imageUpload' and 'pasteImage' to false, but the features were not disabled. Anything I am missing here?

[stefanneculai]

If you don't want to upload files, you should simply not include the File Upload plugin. There was a problem and setting pasteImage to false together with imageUpload was not working. Last commit fixes that.

[nicolasbocquet]

I'm facing the same difficulty than ishaaggarwal with Froala v2.0.5, the File Upload plugin is not included, 'pasteImage' & 'imageUpload' are set to 'false'. But the features are not disabled...

Here my settings :

$('[data-editable-type="full"]').froalaEditor({
toolbarInline: true,
placeholderText: null,
imageUpload: false,
pasteImage: false,
toolbarButtons: ['bold','italic','formatUL','formatOL','|','insertLink','|','insertImage','insertVideo','emoticons']
})

Maybe I do something wrong ?

[stefanneculai]

In V2, the option names are different:

• pageImage is imagePaste
• imageUpload was remove and $.FroalaEditor.POPUP_TEMPLATES.imageInsert should be changed instead
• imageInsertButtons should be changed as well

[nicolasbocquet]

Yes it works ! Thank you stefanneculai

[lebart]

Hi,
I face the same question. I just want to let the url to allow inserting an image. I'm using V2.
I set the imagePaste to false.
I set the buttons correctly.

But if I drag and drop an image in the editor an image still got uploaded (to froala.com since I've not set the upload url). I drop an image directly on the froala form not in the section for image.

@nicolasbocquet can you confirm what you've done?
@stefanneculai can you be explain what you mean by $.FroalaEditor.POPUP_TEMPLATES.imageInsert should be changed instead

Thanks!

[stefanneculai]

@lebart using image.beforeUpload event should help.

[lebart]

@stefanneculai Thanks for your answer.
If I set something like
.on('froalaEditor.image.beforeUpload', function (e, editor, images) { return false })

The editor shows the uploading progression bar and never stops. Can I do something better?

I think a good enhancement would be an option to select easily the way we allow images to be added.
imageInsertingStrategy: "url | upload | both"
imageAllowDragAndDrop: "false | true"
Should I add an Issue to tag this as enhancement?

[rejwood]

@stefanneculai returning 'false' in the image.beforeUpload event will also disable the image being added to the editor.

Is there a way to prevent the upload but still keep the functionality of adding to the editor?

[fmooreNS]

I came across this page when searching for a way to disable image uploads in the froala editor. I was able to disable the feature by setting "allowedImageTypes" to an empty array. As far as I can tell, there are no other adverse effects from this change.

[alpha1988]

I apologize in advance but I have some the uncomfortable bug.
I put my redactor into the popup , and make next actions:
1) I open popup
2) open dialog for adding files
3) click cancel
4) close popup
5) open popup again
6) click ''Upload files btn"
7) and then trying to click on the popup that was showing, but it is closing and nothing is happens
Also, I see that at first opening the popup , it adds tasks for click event into a listener, But at second opening it's not happening.
Can somebody tell me , what it can be?

[anasnakawa]

If that will help anyone, looking at the source of image plugin, we find the following default setting

$.FE.DEFAULTS.imageInsertButtons = ['imageBack', '|', 'imageUpload', 'imageByURL'];

so to disable imageUpload, you can simply override the previous object to

$.FE.DEFAULTS.imageInsertButtons = ['imageBack', '|', 'imageByURL'];

and of course to enable imageByURL

$.FE.DEFAULTS.imageInsertButtons = ['imageBack', '|', 'imageUpload'];

[passledevelopers]

Contrary to the comment made up above, not including the plugin (image.min.js) worked for me in disabling image upload

[nicolasconnault]

@anasnakawa thanks, I applied your solution to disabling the video upload tab, and it worked perfectly!

[angusgrant]

Can someone please provide a codepen example of this. I wish to remove the upload image functionality but am unclear how this is done...

[stefanneculai]

@angusgrant you can easily do that by changing the imageInsertButton option and remove imageUpload from it.