How to delete uploaded image from server when working using Summernote Editor

Question

I have working Summernote editor with image upload, but i noticed that when i add an image content inside the editor it is uploaded successfully into my server folder without saving it yet, but when i delete the image inside the editor it is not remove from my server folder.

Answer 1

You can use this code here

<?php

// include Database connection file
require_once("../../resources/directories.inc.php");

// Return the domain uri
function url(){
  return sprintf(
    "%s://%s",
    isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http',
    $_SERVER['SERVER_NAME'],
    $_SERVER['REQUEST_URI']
  );
}

// Upload file into directory
if (isset($_FILES['file']['name']) && isset($_POST['upload_directory']) && isset($_POST['action']) && $_POST['action']=='upload_file') {
    if (!$_FILES['file']['error']) {
        $folder_dir = $_POST['upload_directory'];
        $name = rand(100,1000).'_'.date('Ymd');

        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name.'.'.$ext;
        $destination = '../../uploads/'.$folder_dir.'/'.$filename; //change this directory
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo BASE_URL.'uploads/'.$folder_dir.'/'.$filename;
    } else {
        echo 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    }
}

// Delete file from directory
if (isset($_POST['img_src']) && isset($_POST['delete_directory']) && isset($_POST['action']) && $_POST['action']=='remove_file') {
    $full_img_src = $_POST['img_src'];
    $folder_dir = $_POST['delete_directory'];

    $upload_dir_url = url().BASE_URL.'uploads/'.$folder_dir.'/';
    $file_name = str_replace($upload_dir_url, '', $full_img_src); // striping url to get file name
    $upload_path = '../../uploads/'.$folder_dir.'/'.$file_name; // path to delete from

    if(unlink($upload_path)){
        echo 'File removed successfully';
    } else {
        echo 'File could not be removed successfully';
    }
}

?>

Javascripts

    const lib_url = '<?php echo BASE_URL."resources/library/summernote.lib.php"; ?>';
$('.summernote_editor').summernote({
    tabsize: 2,
    height: 400,
    spellCheck: true,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'italic', 'superscript', 'subscript', 'clear']],
      ['fontname', ['fontname','fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'help', 'undo', 'redo']],
    ],
    callbacks: {
        onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0], editor, welEditable);
                    },
                    onMediaDelete : function(target) { 
                        deleteFile(target[0].src);
                    }
    }
});

function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    data.append("action", 'upload_file');
    data.append("upload_directory", 'news');
    $.ajax({
        data: data,
        type: "POST",
        url: lib_url,
        cache: false,
        processData: false,
        contentType: false,
        success: function(url) {
            var image = $('<img>').attr('src', url);
            $('.summernote_editor').summernote("insertNode", image[0]);
        }
    });
}

function deleteFile(src) {
    data = new FormData();
    data.append("img_src", src);
    data.append("action", 'remove_file');
    data.append("delete_directory", 'news');
    $.ajax({
        data: data,
        type: "POST",
        url: lib_url,
        cache: false,
        processData: false,
        contentType: false,
        success: function(resp) {
            console.log(resp);
        }
    });
}

Answer 2

To Delete file form Server, you need to use onMediaDelete but usage varies with different summernote versions, sometimes difficult to find in the docs

FOR SUMMERNOTE 0.6.x

$(document).ready(function() {
    $('.summernote').summernote({
        height: "300px",
         onMediaDelete : function($target, editor, $editable) {
         alert($target.context.dataset.filename);         
         $target.remove();
    }
    });
});

FOR SUMMERNOTE 0.7.x

$(document).ready(function() {
    $('.summernote').summernote({
        height: "300px",
        onMediaDelete : function(target) {
                deleteFile(target[0].src);
            }

    });
});

FOR SUMMERNOTE 0.8.x (Use Callbacks)

$(document).ready(function() {
    $('#summernote').summernote({
        height: "300px",
        callbacks: {
            onImageUpload: function(files) {
                uploadFile(files[0]);
            },

            onMediaDelete : function(target) {
                // alert(target[0].src) 
                deleteFile(target[0].src);
            }
        }
    });
});

Javascript : Sample to Delete File using img src

function deleteFile(src) {

    $.ajax({
        data: {src : src},
        type: "POST",
        url: base_url+"dropzone/delete_file", // replace with your url
        cache: false,
        success: function(resp) {
            console.log(resp);
        }
    });
}

PHP: Sample to Delete Image afeter retrieving img src

<?php
  $src = $this->input->post('src'); // $src = $_POST['src'];
  $file_name = str_replace(base_url(), '', $src); // striping host to get relative path
        if(unlink($file_name))
        {
            echo 'File Delete Successfully';
        }
?>

Reference for Image Upload - Summernote v0.8 Image upload to Server