ItSolutionStuff.com

How to Add Custom Validation for Image File Upload in Summernote?

By Hardik Savani • June 24, 2023
Javascript Bootstrap jQuery

Todays, Summernote WYSIWYG editor is a very simple and super fast bootstrap editor. Summernote WYSIWYG editor is a javascript library and it's provide to use their tools for file upload, text bold, color, italy font etc.

We can simply use summernote by following their website "summernote.org". They provide docs for complete guide and we can use in a minute. They also provide file uploading options, But not more for validation like image max size should be 1mb, file mime type should be png, jpg etc. So we can't do it that simple.

However, In this post i will show you how to add custom jquery validation for image upload. we will restrict image size while uploading the image, we will allow to upload only png, jpg and jpeg image file only. So you can do it simply by following jquery code:

Jquery Code:

$(document).ready(function() {

$('#summernote').summernote({

height: 300,

callbacks: {

onImageUpload: function(image) {

var sizeKB = image[0]['size'] / 1000;

var tmp_pr = 0;

if(sizeKB > 200){

tmp_pr = 1;

alert("pls, select less then 200kb image.");

}

if(image[0]['type'] != 'image/jpeg' && image[0]['type'] != 'image/png'){

tmp_pr = 1;

alert("pls, select png or jpg image.");

}

if(tmp_pr == 0){

var file = image[0];

var reader = new FileReader();

reader.onloadend = function() {

var image = $('<img>').attr('src', reader.result);

$('#editor').summernote("insertNode", image[0]);

}

reader.readAsDataURL(file);

}

}

}

});

});

So, above simple jquery code, you can understand how simple we write custom jquery validation and you can add your code. I also provide full example for this example so simply take bellow index.html file and see in your local:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Summernote image size limit validation</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />


<!-- include summernote css/js-->

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>

</head>

<body>


<div class="container">

<h2>Summernote</h2>

<div id="summernote">Hello Summernote</div>

</div>


</body>


<script type="text/javascript">

$(document).ready(function() {

$('#summernote').summernote({

height: 300,

callbacks: {

onImageUpload: function(image) {

var sizeKB = image[0]['size'] / 1000;

var tmp_pr = 0;

if(sizeKB > 200){

tmp_pr = 1;

alert("pls, select less then 200kb image.");

}

if(image[0]['type'] != 'image/jpeg' && image[0]['type'] != 'image/png'){

tmp_pr = 1;

alert("pls, select png or jpg image.");

}

if(tmp_pr == 0){

var file = image[0];

var reader = new FileReader();

reader.onloadend = function() {

var image = $('<img>').attr('src', reader.result);

$('#editor').summernote("insertNode", image[0]);

}

reader.readAsDataURL(file);

}

}

}

});

});

</script>

</html>

You can see above example and it's pretty simple.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Remove All Numbers from String Example

Read Now →

JQuery Moment JS Subtract Hours to Datetime Example

Read Now →

JQuery Moment Subtract Minutes to Datetime Example

Read Now →

JQuery Moment Add Minutes to Datetime Example

Read Now →

JQuery Moment Add Month to Date Example

Read Now →

JQuery Moment Subtract Days to Date Example

Read Now →

How to Use Jquery Datatable in Angular?

Read Now →

Jquery Convert Array into Object Example

Read Now →

Bootstrap Lightbox Plugin Example Code

Read Now →

How to Remove Comma from String in JQuery?

Read Now →

Bootstrap SweetAlert Confirm Dialog Box Model Example

Read Now →

Bootstrap Form Validation using Validator.js Example

Read Now →

Bootstrap Notification Popup Box using Bootstrap-growl JS Example

Read Now →

Bootstrap Dynamic Autocomplete search using Typeahead JS

Read Now →

Bootstrap Colorpicker Example Code

Read Now →