wysiwygdelete-fileimage-uploadhtml-editor

Manage image deletion in a WYSIWYG editor


When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?

In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?


Solution

  • That's a nice question there.
    And yeah, for sure the server would fill up with unused images in some point.
    I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha.
    I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit.
    For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
    An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use. I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.