Summernote How To Delete Images Uploaded To A Folder

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

Only cool people share!

<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.

Summernote How To Delete Images Uploaded To A Folder was last modified: February 25th, 2023 by Maximus Mccullough

Summary

Article Name

Summernote How To Delete Images Uploaded To A Folder

Description

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.

Author

Maximus McCullough

Publisher

A1WEBSITEPRO LLC

Logo

Pages:Previous 1 2 3 4 Next

Index Page

Leave a Reply Cancel reply