CODEWITHSUNDEEP
phpjqueryhtmlsummernote
M9A
M9A

Reputation: 3286

Summernote - Delete image from server

Hi I have used the code from the following link to allow images to be uploaded to the server. Summernote image upload

Would it be possible to implement something similar to remove an image from the server if a user deletes it from the editor? If so, how can I go about achieving this?

Upvotes: 2

Views: 9826

Answers (4)

Vargan
Vargan

Reputation: 51

In Django i am using regex to find imgs in raw html If i am deleting post, or it has different imgs after editing I am removing them

from traceback import print_exc
import re
import os

def get_imgs(html):
    pat = re.compile(r'<img [^>]*src="([^"]+)')
    imgs = pat.findall(html)
    return imgs

def delete_imgs(imgs):
    if imgs:
        base = os.getcwd()
        for img in imgs:
            try:
                img_path = os.path.join(base, img[1:])
                if os.path.exists(img_path):
                    os.remove(img_path)
            except Exception as e:
                print_exc(e)
                print(imgs)
                print(img_path)

Upvotes: 0

4Jean
4Jean

Reputation: 765

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';
        }
?>

enter image description here

This is what I used, its just that, the delete event is not triggered on keypress like backspace, perhaps a keyEvent will handle that in future.

Upvotes: 9

xamax
xamax

Reputation: 53

I guess you solved the problem by now but as I have been looking for the same answer and finally managed to make it work here is my approach:

First I get all the img src in summernote's textarea then I read all the img files in the folder on the server. After that, I unlink the files in the folder which are not in summernote's img src array.

        $dom = new domDocument;
        $dom->loadHTML(html_entity_decode($content));
        $dom->preserveWhiteSpace = false;
        $imgs  = $dom->getElementsByTagName("img");
        $links = array();
        $path = '../content/'.$id.'/';
        $files = glob($path . "*.*");
        for($i = 0; $i < $imgs->length; $i++) {
           $links[] = $imgs->item($i)->getAttribute("src");
        }
        $result=array_diff($files, $links);
           foreach($result as $deleteFile) {
               if (file_exists($deleteFile)) {
                 array_map('unlink', glob($deleteFile));
               }
           }
       }

Hope this will help others.

EDIT to answer to @eachone: You can use AJAX too (I do it with jQuery). 

$('#DivContainingSummernoteTextarea').blur(function(){
$contentPost = $("#SummernoteTextarea").code();
doAjax('something');
});

I store the content of summernote's textarea in $contentPost. Then doAjax will call the PHP and POST $content. If the img on the server is not in $content it will be deleted.

Upvotes: 1

eachone
eachone

Reputation: 577

If we can catch an event for user's deleting image action on the client side, we can make a ajax call for delete image. but I don't know whether it is or not. I also looking for a solution.

Upvotes: 0

Related Questions