Deleting image files when removed from Summernote

[transcoderm]

@Teodor

Deleting an image from the editor does not remove it from the server, this would require a separate server action which checks files in the folder in a database table and checks if they are there.

In the original Summernote, I used callback to get the path of selected image, then I use Server Connect File remove to delete the particular file. This is the example:

1. Get the path of deleted image triggered by Summernote Remove Image button:
   
   Callback:

    onMediaDelete : function(target) {
                var mpath = $(target[0]).attr('src').replace("..", "");
                $('#summernote_mpath').val(mpath);
                },
   

2. Trigger Server Connect on #summernote_mpath value update:
   <input id="summernote_mpath" name="summernote_mpath" class="form-control" type="hidden" dmx-on:updated="delete_editfile.load({mpath: value},true)">

3. The Server Connect deletes the image using File Remove targeted by the path:
   

   

Result:

Can this step be improved and fully integrated into Wappler.

There is other workaround I implemented to remove uploaded image when user leaves the page without deleting the image. This can be done by adding prefix to the uploaded image, then rename it on Summernote save / form submit. Then to clean up, just delete any file with the prefix.

[s.alpaslan]

[George]

We should add the media delete callback as dynamic event in app connect summernote so you can achieve the same effect @patrick

[JonL]

@George

dynamic event

I was precisely thinking about that instead of a fixed action.
In case of an app where you provide an Asset functionality you might want to delete it from Summernote but not from the asset gallery. So hard deleting might not be a good option.

An event that connects with SC is the way to go.

[swf]

I am not sure if that would also be implemented, but considering adding a blog record with 10 images, saved in the database. When the user deletes the record, all of the images inside the blog record should also be removed from the server. Would be great to have this implemented as default function and /or optional checkbox in the ui. So uploading images should have unique names an being stored maybe in an additional database field in the “Blog” database table where Wappler grabs it from?

[Hyperbytes]

Or perhaps return an array of image names on save which could be used to write your own image delete routine, adds more flexibility that way

[transcoderm]

@George

We should add the media delete callback as dynamic event in app connect summernote so you can achieve the same effect @patrick

Bump. Where can I find this option? It is finally the time I need to use this feature. Couldn't seem to find it on Dynamic Events > Summernote. Help

[Teodor]

Yes, this has just been added in Wappler 3.7.1

[sitestreet]

I’m just about to implement the deleting of images from the summernote editor. What’s the process for using the newly added app connect Media Delete?

I’ve added the dynamic event and it’s calling the SC script I’ve created but I don’t know how to send the URL of the deleted image to it so it’s currently giving a ‘file not found’ error.

[Teodor]

Well, the dynamic event provides the src of the deleted image - you can find it in the data picker.

[sitestreet]

Thanks @Teodor, that was the bit of info I was missing. I thought it would send the info via POST like the upload script does. I’ve now got it working using GET and sending the URL using the src field from the data picker.

[digitera]

How can I get img src from the selected image? I can’t find that anywhere?

[TheBotfather]

I know its been a while but @Digitera did you ever figure out how to grab the src of the images and pass it through? I spent some time trying to make it work this morning without success.