Search code examples
tinymce

In TinyMCE how do you deal with images uploaded to the server and then deleted in the editor?

I have images uploaded to the server working in TinyMCE via drag-and-drop and the image upload dialog. They get saved with different naming conventions, but it works.

If a user deletes a post, I can do a backend check and delete associated images.

But how does TinyMCE deal with images deleted in the following cases?

  1. An image is uploaded while editing. It gets immediately saved on the server, even before the post is saved. What if the user decided to delete the image in the post they are editing. How does the already-uploaded image get deleted?

  2. What about if a user goes back and edits a post and deletes an image? How does TinyMCE deal with the image, which is already on the server?

  3. Or what if the post is never saved and the user has added images to it? They are instantly saved on the server. How do they get deleted?

Do people just live with extra, unused images on the server?

Thanks,

doug

Solution

  • TinyMCE is not designed to directly address these sort of image management and uploading edge cases. They can (and should be managed) but it is out of TinyMCE's scope to do so with built in functionality.

    One method to ensure you are not left with orphaned files is to not upload them to your server until the document itself is submitted to be saved. Many of the edge cases you discuss could be addressed by changing the automatic_uploads setting.

    When an image is added to TinyMCE, it is added inline to content as a base64 encoded blob URL. You have the option to configure uploading that image to your database, afterwhich, the src of the image tag is updated with the image's remote, database location.

    However, if you turn automatic_uploads off, then images will only be uploaded when editor.uploadImages() is called. This could allow users to add and remove images to content while creating it, but for only their final version of the content (and images) to be saved into the database.

    Here's some more information:

    https://www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads

    https://www.tiny.cloud/docs/general-configuration-guide/upload-images/

    If an end-user loads existing content that includes an image (already saved to the database) but removes that image from content and then re-saves the content, one way to account for this is to parse content as it is loaded into the editor, and make a list/array/object of all included media assets, and then compare that to the the assets in content upon save. Then you could use that list to update the database accordingly. TinyMCE does not offer one specific method to do this, because there are so many different ways of implementing this sort of behavior.

    Another option is to make orphan control server maintenance a completely separate task from the editing process. One approach for this would be to run regularly-scheduled background maintenance task on server that parses content, and looks for orphaned image files.