Deleting image files when removed from Summernote

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:
   

   

   Annotation 2020-04-24 215805481×571 29.3 KB

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.

Annotation 2020-04-24 212935627×714 44.6 KB