Store Image Uploads On Server With Summernote Not Base 64

Store Image Uploads On Server With Summernote, not the default base 64! If you do image uploads through Summernote you will notice that it stores base 64 code for the image. If you are saving that kind of code in your database you will notice that it bloats the database. This will cause lag time on your server. The much better option is upload the image to the file system and store the actual image in a directory. Please navigate to page #4 to see the video on how this is done. For written instructions with code please read on. Update: Navigate to page#5 for updated versions of summernote, copy and paste codes. I also created a new tutorial on how to store Summernote entries in MySQL.

Setting Up To Store Image Uploads On Server With Summernote Not Base 64

Let us set up our server to store images though summernote on a directory. First we will create 2 files and one folder on our server. For this example we will create an index.php file then we will create an editor-upload.php file. The index.php code is on the next page.

Create The Index.php File

Create an index.php file on your server. Here is the code. Be sure to include the html language tag as well as the doctype.

<html lang="en"><!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea id="summernote"></textarea>
</form>
</div>
<script>$(document).ready(function() {
$("#summernote").summernote({
placeholder: 'enter directions here...',
height: 300,
callbacks: {
onImageUpload : function(files, editor, welEditable) {

for(var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
}
}
});
});
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
data: form_data,
type: "POST",
url: 'editor-upload.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
$(el).summernote('editor.insertImage', url);
}
});
}
</script>
</body>
</html>

Once you have this done, navigate to the next page for the next step

Create editor-upload.php File

Now Create editor-upload.php file. This is what will process the image file for you. Here is what it looks like.

<?php
if(empty($_FILES['file']))
{
exit();
}
$errorImgFile = "./img/img_upload_error.jpg";
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)) . '.' . end($temp);
$destinationFilePath = './img-uploads/'.$newfilename ;
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
echo $errorImgFile;
}
else{
echo $destinationFilePath;
}

?>

Create img-uploads Directory

Now create a folder and call it img-uploads. This is the folder we will be storing the images in. Make sure it has permissions to store files. Just in case my WordPress corrupts my code here, you can download the files here. Summernote Image Upload On The Fly The video is on the next page.

Video for Lesson

https://www.youtube.com/watch?v=RNzbPXZ5t_c&feature=youtu.be

Updated Version of Image File Upload

This first part is for the form and the script to use. Create an index.php file or name it whatever you want to. Put this code into it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 200,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});

function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "editor-upload.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
</script>
</body>
</html>

Create a file and call it editor-upload.php and insert this file into it.

<?php
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$filename = $name.
'.'.$ext;
$destination = '/uploads/'.$filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
$abpath =dirname(__FILE__);
echo $abpath.'/uploads/'.$filename; //change this URL
} else {
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
?>

Also, make sure that you have an uploads folder in your project folder. To delete images automatically from your folder, see this post here. https://a1websitepro.com/summernote-how-to-delete-images-uploaded-to-a-folder/