Summernote rich text editor-restrict image above particular height and width

user_17016734 0
Viewed 247

When I upload image in editor, I am able to find it's size. But I want it's height and width to restrict for height and width above particular limit. Below is result which I'm getting when I upload image.

See image to image upload result

For size restriction it's working as below-

onImageUpload(images, insertImage) {
    if (images[0].size <= 100000) {
        for (let i = 0; i < images.length; i++) {
            const reader = new FileReader();
            reader.onloadend = () => {
                insertImage(reader.result);
            };
            reader.readAsDataURL(images[i]);
        }
    } else {
        alert('Image not saved, max allowed image size is 100kb');
    }

};

rich-text-editor summernote reactjs file-upload javascript
2 Answers

What editor are you using? UEditor is a very good rich-text editor.

user_107575630 
onImageUpload(images, insertImage) {
    console.log('onImageUpload', images);
    if (images[0].size <= 100000) {
        for (let i = 0; i < images.length; i++) {
            const reader = new FileReader();
            reader.onloadend = () => {
                var i = new Image();
                i.src = reader.result;
                i.onload = function () {
                    if (i.width <= 200 && i.height <= 200) {
                        insertImage(reader.result);
                    } else {
                        cogoToast.warn('Image not saved, image width and height should be less than 200*200');
                    }
                };
            };
            reader.readAsDataURL(images[i]);
        }
    } else {
        cogoToast.warn('Image not saved, max allowed image size is 100kb');
    }
};

It will work in this way.Thanks!

user_170167340
Related