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