Setting Up The Files
Now let’s set up the files. We will start with the config file. I am working on a local server here, so this config file is using the username of root. The name of the database that we set up above is summernote.
<?php
$con = mysqli_connect("localhost","root","","summernote");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
echo "";
}
?>
Index File
The next file we will set up is the index file. It brings in all the css files and scripts that you need to make this work. This is also where we put our form.
<html lang="en"><!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<div class="container">
<h1>Upload Images With Summernote</h1>
<p>When you upload an image with summernote the default is to put it in the database with base64 encoding. This will bloat your database. In this tutorial you will upload an image to a folder then store the path in your database. </p>
<form method="post" action="addentry.php">
<textarea id="summernote" name="entry"></textarea>
<input type="submit" value="submit" class="btn btn-lg btn-success" name="submit" />
</form>
</div>
<script>$(document).ready(function() {
$("#summernote").summernote({
placeholder: 'enter information...',
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>
Editor Upload File
Here is your editor-upload.php file. This is also where we insert each image that is put into the form into the database.
<?php
include_once('config.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;
mysqli_query($con,"INSERT INTO uploads(`file`)
VALUES ('$destinationFilePath')");
}
?>
Add Entry Script
The addentry.php script adds your entire summernote form into the database.
<?php
include_once('config.php');
if(isset($_POST['submit'])){
$entry=$_POST['entry'];
}
$sql = "INSERT INTO entry (entries) VALUES ('$entry')";
if ($con->query($sql) === TRUE) {
echo "<p>New record created successfully</p>";
} else {
echo "Error: " . $sql . "<br>" . $con->error;
}
?>
img-uploads Directory
Do not forget your img-uploads directory. You have to have some place on your server to store the uploaded images.
Get the entire code for $5.
Summernote How To Store Images and Entries in MySQL Without Base 64 was last modified: February 25th, 2023 by
Summary
Article Name
Summernote How To Store Images and Entries in MySQL Without Base 64
Description
In this tutorial, we will show you how to store images and entries in MySQL without base 64 encoding. Base 64 encoding bloats your database
Author
Maximus McCullough
Publisher
A1WEBSITEPRO LLC
Logo
A1WEBSITEPRO Social Media Pages
Here are my social media pages, lets hook up!