Summernote - Adding images with file-size limit

Question

I've been googling everywhere to find a way to prevent any images bigger than 500kb but haven't found a single solution. The reason why I'm trying to limit the file size of images is for mobile users using limited data plans.

I ended up believing that it's impossible because summernote saves images as text something like this.....

<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>

and generate back as an image when needed.

Do I still need to limit the file size even if I store them as text in DB?

If I have to, is there an api for this?

Just to answer myself - I found this article http://stackoverflow.com/questions/11402329/base64-encoded-image-size. Base64 is about 137% bigger than the actual image file. — Raccoon, Dec 19 '14 at 11:45

score 8 · Answer 1 · edited Jan 04 '20 at 19:34

8

You can limit the picture size in summernote plugin by adding these options:

$('.summernote').summernote({
    // your options... and
    maximumImageFileSize: 500*1024, // 500 KB
    callbacks:{
        onImageUploadError: function(msg){
           console.log(msg + ' (1 MB)');
        }
    }
});

edited Jan 04 '20 at 19:34

Bruno de Souza Rocha

131
1
1
9

answered Mar 03 '18 at 14:34

Nassim Aouragh

333
3
7

score 3 · Answer 2 · answered Mar 12 '20 at 18:35

3

Check this link: https://github.com/summernote/summernote-rails/issues/22

$('.summernote').summernote({ maximumImageFileSize: 1048576 });

answered Mar 12 '20 at 18:35

Tahuilaile

31
2

score 2 · Accepted Answer · answered Dec 19 '14 at 09:52

2

If i understand correctly you use this https://github.com/summernote/summernote/blob/develop/src/js/settings.js please check the maximumFileSize: 'Maximum file size', parameter in the image option. In there you can set the limit you want.

answered Dec 19 '14 at 09:52

1

It's working for me, but if the user select a file with bigger size that specified in maximumFileSize, the summernote will not add the image, but also there is no notification or error to the user to tell him, the image size is bigger, any idea? – Joe Apr 23 '16 at 19:07
2

Hi check this link https://github.com/summernote/summernote/blob/develop/src/js/bs3/settings.js under maximumImageFileSize are available callbacks. You probably need a callback for onImageUpload and onImageUploadError, for example onImageUpload: function(files) { //// check file size against maximumImageFileSize } , onImageUploadError: function() {console.log("Error uploading image");} Some more ideas can come up from here http://summernote.org/deep-dive/#onimageupload – Apr 23 '16 at 22:11

Summernote - Adding images with file-size limit

3 Answers3