How to add custom jquery validation for image file upload in summernote ?
In this post we will give you information about How to add custom jquery validation for image file upload in summernote ?. Hear we will give you detail about How to add custom jquery validation for image file upload in summernote ?And how to use it also give you demo for it if it is necessary.
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.
How can make an array from the values of another array's key?
In this post we will give you information about How can make an array from the values of another array's key?. Hear we will give you detail about How can make an array from the values of another array's key?And how to use it also give you demo for it if it is necessary.
If you are working on PHP or other PHP framework and you want to create array of another array value. now you can see on following example how can you make array form another multidimensional array key's.
For example you have array like:
$multi = array(
['1'] => array('id'=>1,'name'=>'hardik'),
['2'] => array('id'=>1,'name'=>'vimal'),
['3'] => array('id'=>1,'name'=>'harshad'),
)
but if you want to this multi-dimensional array just like this way:
$test = array('hardik','vimal','harshad');
so, we can make this type of array from multi-dimensional array using array_column() funtion.
you can use this function easy as under.
$result = array_column($multi, 'name');
Try this..........
Hope this code and post will helped you for implement How can make an array from the values of another array's key?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs
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 >
<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…
Hope this code and post will helped you for implement How to add custom jquery validation for image file upload in summernote ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs