Delete Images Off Server In Summernote with php, mysql, jquery, and ajax

In this article, I will explain how to delete images from the server using Summernote, a WYSIWYG editor, with the help of PHP, MySQL, jQuery, and Ajax.

Summernote is a popular open-source WYSIWYG editor that allows users to create rich text content, including images. Sometimes, users may want to delete the images they have uploaded to the server, which requires implementing the functionality to delete images.

Prerequisites: To follow along with this tutorial, you should have a basic understanding of PHP, MySQL, jQuery, and Ajax. You should also have Summernote installed on your web application.

Step 1: Create a database table

Create a database table named “images” to store the image details. The table should have the following fields:

• id (primary key)
• name (the name of the image file)
• path (the path of the image file on the server)
• created_at (the date and time the image is uploaded)

Here’s an example SQL code for creating the “images” table.

CREATE TABLE images (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  path VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

This code creates a table named “images” with four columns: “id” (an auto-incrementing primary key), “name” (the name of the image file), “path” (the path of the image file on the server), and “created_at” (the date and time the image was uploaded, set to the current timestamp by default).

Note that the specific data types and column names used may vary depending on your specific requirements and database schema.

Step 2: Create a PHP script to handle the image deletion

Create a PHP script that handles the deletion of images from the server. The script should accept a parameter named “id” that corresponds to the ID of the image to be deleted.

<?php
// Connect to the database
$conn = mysqli_connect('localhost', 'username', 'password', 'database');

// Check if the ID parameter is set
if(isset($_POST['id'])) {
  $id = $_POST['id'];

  // Retrieve the image details from the database
  $query = "SELECT * FROM images WHERE id = $id";
  $result = mysqli_query($conn, $query);
  $row = mysqli_fetch_assoc($result);

  // Delete the image file from the server
  unlink($row['path']);

  // Delete the image details from the database
  $query = "DELETE FROM images WHERE id = $id";
  mysqli_query($conn, $query);
}
?>

Step 3: Modify the Summernote initialization code

Modify the Summernote initialization code to add a custom button that deletes the selected image. The code should look like this:

$(document).ready(function() {
  $('#summernote').summernote({
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'italic', 'underline', 'clear']],
      ['fontname', ['fontname']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['custom', ['deleteImage']],
    ],
    buttons: {
      deleteImage: function() {
        var image = $('.note-image-input:checked').closest('.note-image-popover').find('.note-image-filename').text();
        var id = $('.note-image-input:checked').closest('.note-image-popover').data('value');
        $.ajax({
          url: 'delete-image.php',
          method: 'POST',
          data: {id: id},
          success: function() {
            $('.note-image-input:checked').closest('.note-image-popover').remove();
          }
        });
      }
    }
  });
});

The “deleteImage” button is added to the Summernote toolbar. When the button is clicked, the code retrieves the name and ID of the selected image and sends a POST request to the “delete-image.php” script. On successful deletion of the image from the server, the code removes the image from the Summernote editor.

Step 4: Test the code

Test the code by uploading an image to the Summernote editor and then clicking on the “deleteImage” button. The image will delete from the server and removed from the database.

The above code provides a basic implementation for deleting images from the server using Summernote. However, there are a few things to keep in mind when implementing this functionality in your own web application:

1. Security considerations: Ensure that the PHP script used for deleting images has proper security measures in place to prevent unauthorized access or malicious file deletion. This may include implementing user authentication, validating user input, and sanitizing user data.
2. File paths and naming conventions: Ensure that the file paths and naming conventions used for storing images on the server are consistent and easy to manage. It is also important to properly handle file extensions to prevent security issues such as file upload vulnerabilities.
3. Error handling: It is important to handle errors that may occur during image deletion, such as network errors, server errors, or file permission errors. Proper error handling can improve the user experience and prevent potential security issues.
4. Server space and performance: Keep in mind that deleting images from the server can free up disk space and improve server performance.

In summary, deleting images from the server using Summernote requires implementing the functionality to delete images using PHP, MySQL, jQuery, and Ajax. The code provided in this article provides a basic implementation and can be modified to suit your specific requirements. When implementing this functionality, it is important to consider security, file paths and naming conventions, error handling, and server space and performance.

Read more on how I created a script that will delete images not in your database and optimize them at the same time.