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.
23 Comments
I’ve used your code with some success thanks for that BUT (yes there’s always a but).
If i try to upload multiple image files say 10 images, 10 images will be displayed in the summernote edit box but some will be duplicates, you might have 8 of the same and 2 of another and only those 2 files will have actually been uploaded to the server.
If I debug the code in Chrome and put a break in the for loop where the file list array is loaded one at a time using ajax, I can see each image being loaded and they all go up just fine. When not in the debugger I get the aforementioned problem. It’s like the ajax call is not getting time to complete or something, any ideas?
Yeah thats an interesting problem. I think that may be an issue with the PHP uploader page. I don’t have time to look right now but in the upload php there may be an issue. Here are a couple multi uploaders to try.
Without Validation
[code]foreach($_FILES["files"]["tmp_name"] as $key=>$tmp_name){
$temp = $_FILES["files"]["tmp_name"][$key];
$name = $_FILES["files"]["name"][$key];
if(empty($temp))
{
break;
}
move_uploaded_file($temp,"UploadFolder/".$name);
}[/code]
With Validation
[code]$errors = array();
$uploadedFiles = array();
$extension = array("jpeg","jpg","png","gif");
$bytes = 1024;
$KB = 1024;
$totalBytes = $bytes * $KB;
$UploadFolder = "UploadFolder";
$counter = 0;
foreach($_FILES["files"]["tmp_name"] as $key=>$tmp_name){
$temp = $_FILES["files"]["tmp_name"][$key];
$name = $_FILES["files"]["name"][$key];
if(empty($temp))
{
break;
}
$counter++;
$UploadOk = true;
if($_FILES["files"]["size"][$key] > $totalBytes)
{
$UploadOk = false;
array_push($errors, $name." file size is larger than the 1 MB.");
}
$ext = pathinfo($name, PATHINFO_EXTENSION);
if(in_array($ext, $extension) == false){
$UploadOk = false;
array_push($errors, $name." is invalid file type.");
}
if(file_exists($UploadFolder."/".$name) == true){
$UploadOk = false;
array_push($errors, $name." file is already exist.");
}
if($UploadOk == true){
move_uploaded_file($temp,$UploadFolder."/".$name);
array_push($uploadedFiles, $name);
}
}
if($counter>0){
if(count($errors)>0)
{
echo "<b>Errors:</b>";
echo "<br/><ul>";
foreach($errors as $error)
{
echo "<li>".$error."</li>";
}
echo "</ul><br/>";
}
if(count($uploadedFiles)>0){
echo "<b>Uploaded Files:</b>";
echo "<br/><ul>";
foreach($uploadedFiles as $fileName)
{
echo "<li>".$fileName."</li>";
}
echo "</ul><br/>";
echo count($uploadedFiles)." file(s) are successfully uploaded.";
}
}
else{
echo "Please, Select file(s) to upload.";
}[/code]
Work great, thank you for great tutorial, anyway is it possible to delete image when user remove the image from the editor? thanks.
That would be a great addition. I have not worked on that yet but as soon as I do I will post the tutorial.
Dear Sir,
Please give me complete coding for this
Setting Up To Store Image Uploads On Server With Summernote Not Base 64.
I have tried many time, but can not the correct solution.
Please help me.
Here are the complete files for this lesson. You could not see them on the post?
thank you :))
Thank you for great tutorial!
But I can’t see any attached images in the summernote edit box.
Your sample index.php also can’t see any images.
Can you help me?
Can you send me a link to what you are trying to do? Are you using Boostrap 3?
Please help me ,I didn’t get full code page after I have paid the tutorials.Below pasted website text is tutorials.
Here is the complete download. https://goo.gl/RhqV1X let me know if you have any more issues 🙂
Brooo i love youuuu !!
Glad to help, lol. Thanks for the comment.
I get this:
[Deprecation] Resource requests whose URLs contained both removed whitespace (`\n`, `\r`, `\t`) characters and less-than characters (`<`) are blocked. Please remove newlines and encode less-than characters from places like element attribute values in order to load these resources. See https://www.chromestatus.com/feature/5735596811091968 for more details
Is that only in the chrome browser?
hello when i tried to select image from text area it shows me empty means am unable to insert image into text area but am able to insert text.
and i have one more question that you have not used form method post and enctype in form so without these can we insert data in database. Am new in this field please let me know how to insert textarea data in database. thank you in advance.
As far as the text area is concerned usually you cannot insert an image and make it work. This text area is special though because it uses summernote. Summernote uses jQuery to susubmitmbit to a php processor page. The PHP processor page actually does the work of submitting the image path to the database. It is also responsible for uploading the image to a folder on the server. Let me know if this helps explain it to you.
It is dosen’t work for me. I also using bootstrap 3
It works I just did it again. Make sure that you have your libraries in the same exact order as I do
Sir your provided source files link not valid kindly please update the link
The source code is located on the pages. Please look again.
work great thanks for the great tutorial
Here is a new article on how to delete the images. https://a1websitepro.com/summernote-how-to-delete-images-uploaded-to-a-folder/