In Summernote you want to be able to delete your images in your directory or folder at times. As far as I can see, this is the only tutorial out there on this, so I decided to do it. I made a tutorial in the past that shows you how to upload images to a directory with Summernote. Summernote used base64 encoding, which will bloat your database. However, this is the tutorial that will show you how to delete those images out of the upload's folder.
HTML Image Sources MySql
The problem was that people could not delete images when they deleted a post that contained HTML. So, in the database, you may have a text entry but not have the file paths listed in another table. This made it difficult to try and find them and delete them, especially when you have many posts. To solve that problem, I wrote the following scripts.
Summernote Upload Images with HTML
Many know that summernote will upload your images with all the HTML included. This is nice because it saves you from having to make separate tables for your images. It is also done with AJAX and PHP, which makes the process smoother. Let's discuss on the following page the structure for this. If you just want the script for $5 click here or read on. :-)Index Page
Here is the index.php page. This will upload the images and create entries in your database. I also added the header, menu and footer files. They contain the connection to the database and scripts that we use.<?php include_once('header.php'); ?>
<div class="container">
<h1>Upload & Delete 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. Also you will learn how to delete those images from your folder when deleting a post.</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>
<?php include_once('footer.php'); ?>
Header File
<?php include_once('config.php'); ?>
<html lang="en"><!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<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>
<?php include_once('menu.php'); ?>
Footer File
</div> </div> <footer class="container-fluid bg-4 text-center"> <div class="left"> Connect With Us <a href="https://www.facebook.com/pages/A1WebsitePro/139087542802830" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="https://www.twitter.com/a1websitepro"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="https://www.linkedin.com/pulse/activities/maximus-mccullough+0_1c4Gue9tsoRotTTXUPEk0p?trk=mp-reader-h"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="https://pinterest.com/a1websitepro"><i class="fa fa-pinterest" aria-hidden="true"></i></a> <a href="https://www.instagram.com/maximusmcculloug/"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="https://www.youtube.com/user/MaximusMccullough?feature=mhee"><i class="fa fa-youtube" aria-hidden="true"></i></a> <a href="https://www.reddit.com/user/maximusmcc/"><i class="fa fa-reddit" aria-hidden="true"></i></a> </div> <div class="right"> Share Us With Your Friends <a href="http://www.facebook.com/sharer.php?u=https://just4u.ezbloo.com" target="_blank"> <i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="http://twitter.com/share?url=https://just4u.ezbloo.com" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="http://reddit.com/submit?url=https://just4u.ezbloo.com" target="_blank"> <i class="fa fa-reddit" aria-hidden="true"></i></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://just4u.ezbloo.com" target="_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="mailto:?Subject=Just 4 U!&Body=I%20saw%20this%20and%20thought%20of%20you!%20https://just4u.ezbloo.com"> <i class="fa fa-email" aria-hidden="true"></i></a> </div> <br/> <p>Made By <a href="https://a1websitepro.com">A1WEBSITEPRO.com</a></p> </footer> </body> </html> <?php $con->close();?>Menu File
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="entry.php">Entries</a></li>
<li><a href="deleteimages.php">Delete Images</a></li>
</ul>
</div>
</nav>
On the next page we will have the upload script.
Uploads
Make sure that you create img-uploads folder on your server. This is where the images will go. Then you want to create the following script. The index file will use this for uploading your images.<?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')");
}
?>
Entry File
Now create an entry.php file and put this code in it. This will list all the entries we have in the database.<?php include_once('header.php'); ?>
<div class="container-fluid">
<h1>Entires</h1>
<?php
$ct=1;
$result = $con->query("SELECT id, date_time FROM entry") ;
while ($row = $result->fetch_assoc()) {
echo ' <div class="row">
<div class="col-sm-4">
<p>'.$row['id'].'</p>
</div>
<div class="col-sm-4">
<p>'.$row['date_time'].'</p>
</div>
<div class="col-sm-4">
<p><a href="view.php?p='.$row['id'].'" class="btn btn-lg btn-success">View</a></p>
</div>
</div>
';
$ct++;
}
?>
</div>
<style>.row{border:solid #000 1px;}</style>
<?php include_once('footer.php'); ?>
Next we will create the view file.
View File
Create a view.php file and put this in it. This will display the details of one entry with the option to delete it.<?php include_once('header.php'); ?>
<div class="container-fluid">
<h1>Entires</h1>
<?php
$ct=1;
$theid= $_GET['p'] ?? 'Not Set';
$result = $con->query("SELECT * FROM entry WHERE id='$theid'") ;
while ($row = $result->fetch_assoc()) {
echo ' <div class="row">
<div class="col-sm-9">
<p>'.$row['entries'].'</p>
</div>
<div class="col-sm-4">
<form>
<input id="entry" type="hidden" value="'.$row['id'].'">
<button id="delete" class="btn btn-lg btn-danger">Delete</button>
</form>
<div id="display"></div>
</div>
</div>
';
$ct++;
}
?>
</div>
<style>.row{border:solid #000 1px;}</style>
<script>
$(document).ready(function(){
$("#delete").click(function(){
var entry = $("#entry").val();
var dataString = 'entry1='+ entry;
if(entry=='')
{
$("#display").html("Please Fill All Fields");
}
else
{
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
<?php include_once('footer.php'); ?>
Processor File
Now you will need the processor.php file to remove all the images from the folder that were contained in your post. Here is the script.<?php include_once('config.php');
$entry1=$_POST['entry1'];
$result = $con->query("SELECT * FROM entry WHERE id='$entry1' LIMIT 1") ;
while ($row = $result->fetch_assoc()) {
$html = $row['entries'];
}
//get number of images
$pattern = '/<img[^>]*src=([\'"])(?<src>.+?)\1[^>]*>/i';
$numberofimages = preg_match_all($pattern, $html);
//get image paths from html
$get_Img_Src = '/<img[^>]*src=([\'"])(?<src>.+?)\1[^>]*>/i'; //get img src path only...
//$cunn=preg_match_all($get_Img_Src, $html, $result);
preg_match_all($get_Img_Src, $html, $result);
//delete images
for($var=0; $var < $numberofimages; $var++){
unlink($result['src'][$var]);
}
mysqli_query($con,"DELETE FROM entry WHERE id='$entry1'");
echo '<div class="alert alert-success">The entry and all of the images have been deleted</div>';
echo '<script>window.location.replace("entry.php");</script>';
$con->close();
?>
I added some extra goodies if you want to download this file instantly. I only ask for a small donation of $5 for the time it took me to create it.
