Disable image upload in Summernote

Question

Is there any way to completely disable uploading of images in Summernote, but keep the image url input? The closest thing I found was the disableDragAndDrop: true option, but this doesn't remove the upload button from the image pop-up

Televise

Answer 1

There's probably a better way to accomplish what you're going for... but a very simple solution that comes to mind is to just add this to your stylesheets:

.note-group-select-from-files {
  display: none;
}

It works perfectly to leave just the image url input, and accomplishes what you're going for unless someone were to inspect element and discover that the upload element still exists with display none:

---

Edit : I took a look at the Summernote source code, and it looks like the above solution is actually a good way to go. There's currently no api to disable just the file upload button, let alone do so while leaving the img url input intact. You could always add it and open a pull request, of course.

https://github.com/summernote/summernote/blob/4b1bf144862a88899a464ddfab6bc0593a061fbc/src/js/bs3/module/ImageDialog.js#L24

  var body = '<div class="form-group note-group-select-from-files">' +
               '<label>' + lang.image.selectFromFiles + '</label>' +
               '<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' +
               imageLimitation +
             '</div>' +
             '<div class="form-group" style="overflow:auto;">' +
               '<label>' + lang.image.url + '</label>' +
               '<input class="note-image-url form-control col-md-12" type="text" />' +
             '</div>';

Randers

Use this javascript to disable: var selectFromFiles = document.querySelector('.note-group-select-from-files'); if (selectFromFiles) { selectFromFiles.style.display = 'none'; } – Cellar

Answer 2

You can override the toolbar and define your own set of buttons there. Here is a sample codesnippet:

$("#summernote").summernote({
        height: 300,
        toolbar: [
            [ 'style', [ 'style' ] ],
            [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
            [ 'fontname', [ 'fontname' ] ],
            [ 'fontsize', [ 'fontsize' ] ],
            [ 'color', [ 'color' ] ],
            [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
            [ 'table', [ 'table' ] ],
            [ 'insert', [ 'link'] ],
            [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
        ]
    });

This code generates the toolbar without video and image insert option and with all other options available. You can check the detail API documentation here.

Amerson

he / she just want to disable upload from pc not from URL so if we use your solution it will delete image feature completely. – Chapa

Answer 3

Find this code in summernote.js

tplDialog = function (lang, options) {
      var tplImageDialog = function () {
        return '<div class="note-image-dialog modal" aria-hidden="false">' +
                 '<div class="modal-dialog">' +
                   '<div class="modal-content">' +
                     '<div class="modal-header">' +
                       '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                       '<h4>' + lang.image.insert + '</h4>' +
                     '</div>' +
                     '<div class="modal-body">' +
                       '<div class="row-fluid">' +
                         '<h5>' + lang.image.selectFromFiles + '</h5>' +
                         '<input class="note-image-input" type="file" name="files" accept="image/*" />' +
                         '<h5>' + lang.image.url + '</h5>' +
                         '<input class="note-image-url form-control span12" type="text" />' +
                       '</div>' +
                     '</div>' +
                     '<div class="modal-footer">' +
                       '<button href="#" class="btn btn-primary note-image-btn disabled" disabled="disabled">' + lang.image.insert + '</button>' +
                     '</div>' +
                   '</div>' +
                 '</div>' +
               '</div>';
      };

Remove this code :

'<h5>' + lang.image.selectFromFiles + '</h5>' +
'<input class="note-image-input" type="file" name="files" accept="image/*" />' +

Now file upload input is remove from modal dialog.

Insignia

Answer 4

Using Jquery This worked for me

 $('div.note-group-select-from-files').remove();

Or if (as suggested by dwilda) you want to check that the element exists before attempting to remove it:

var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
  imageUploadDiv.remove();
}

Contemptible

CSS would be better approach since we don't know when the tag is going to be present in DOM. The may be nothing to remove() – Pommard

That's true dwilda. I just thought someone never can tell could inspect element and reverse hidden to visible. – Contemptible

A side note: there's no need for the second code snippet. If the jquery selector delivers an empty result set, you can still call remove() on this empty set. No exception will be thrown – Symbolics

I like this approach since hiding the simply layer via css leaves the file input in my post array. If it's not a field I want in my form, I'd rather have it removed vs simply hidden ;) – Changteh

Answer 5

For summernote version .8*

Use the following to remove the button:

.note-insert {
    display: none
}

Users will still be able to drag and drop pictures.

Intima

Answer 6

After reading a bit of code i found by removing this code in summernote.js will remove that UPLOAD FEATURE

Just remove this form your file as any of above answers won't work for me

'<div class="form-group note-form-group note-group-select-from-files">' +
               '<label class="note-form-label">' + lang.image.selectFromFiles + '</label>' +
               '<input class="note-image-input form-control note-form-control note-input" '+
               ' type="file" name="files" accept="image/*" multiple="multiple" />' +
               imageLimitation +
             '</div>' +

Deeprooted

It's not usually advisable to edit other people's libraries, unless you want to be on the hook for maintenance after each update. – Stanhope

Answer 7

I had the same problem and it seems to be complicated but you can simply redeclare the toolbar:

    `$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});`

Willem

The question was how to keep the ability to add an image by URL, but remove the ability to upload an image. This removes both, so it doesn't answer the question. – Stanhope

Answer 8

$('.note-group-select-from-files').first().remove();

Jolty

Answer 9

//Disable image button

.note-insert.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    display:none;
}

//Disable Video button

.note-insert.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    display:none;
}

Submediant

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Centesimo