Ckeditor5: Delete uploaded image when it's removed from the editor

[farbodkain]

hi, im using ckeditor 5 alpha.1 and ckfinder 3 for upload image on my web server. i just want to know is it possible to delete uploaded image from storage folder when remove image from textarea? or user have to go in ckfinder manager and delete it manual?

[Reinmar]

There's no support for automatic deleting from the server. That would be pretty tricky to implement because <img> including this file might've had been copied to other documents. Generally speaking, the editor itself is not able to manage that, the CKFinder's connector neither. It would need to be an additional service with access to all the posts stored in the database and all files.

Still, it's a valid feature request so I'm confirming your ticket.

[ulziibadrakh-p]

Cool feature

[Reinmar]

I've been thinking about this feature a bit in the context of Easy Image.

The only way how I can imagine this implemented is that Easy Image would expose an API to which you (your system) would need to provide paths to all images used in all your articles. It'd work like this:

1. Your system extracts all image URLs from rich text content stored in your database.
2. It then sends the list of these URLs to Easy Image service.
3. Finally, after the list is confirmed by you, the files will be removed.

I've been thinking how to secure this process so you don't mistakenly remove too many files. Initially, I thought about an additional step (between 2 and 3) where you'd get a list of files to be deleted (perhaps zipped so you could backup them) and which you'd need to confirm to delete. However, this is too complicated.

Therefore, a better solution would be if Easy Image would not permanently delete these files. It could mark them as deleted and notify you (via email) if anyone tried to access these files in the future. In fact, this sounds much better.

[wwalc]

Or, a slightly more universal approach:

• EI exposes an API to fetch the list of all uploaded files.
• Your system downloads the list of files, filters out the one that are not used.
• Your system sends an API request to EI to delete the files that are no longer used.

[Methodician]

So, I got ahead of myself and just spent a lot of time making sure I kept track of all the uploaded images in a master list (after building a custom plugin for Firebase Storage) so I can make sure to pull them down if they are no longer used.

You're right, this is more complicated than just that since the images could be copied to other documents, but still it'd be nice if CKEditor emitted some info about images being inserted or deleted. I'm afraid when I unleash this to the public people might upload a lot of images and cost me money in the long run.

Right now the only thing I can think of is to parse the HTML every time an article is saved and update a master list that way.

[Methodician]

Hmm would that be a reasonable feature request? Could CKEditor easily parse the HTML and emit all the URLs in image tags? That would do the trick for me...

[Reinmar]

CKEditor runs in a browser and by default produces HTML, so all you need to do to find all image URLs is this:

Array.from( new DOMParser().parseFromString( editor.getData(), 'text/html' )
    .querySelectorAll( 'img' ) )
    .map( img => img.getAttribute( 'src' ) )

It'll return you an array of URLs.

Additionally, if you use EasyImage or other upload service which supports responsive images, you will also have to take srcset into consideration which would make the above code slightly longer. But that's the basic idea.

[Reinmar]

DUP reported in https://github.com/ckeditor/ckeditor5-image/issues/236

[rka2020]

hi i have img source url. so, how do remove image from server when posts is deleted. i used from asset method at the url statement in upload method.

[shibbirweb]

You can use this plugin to get the removed image src. CKEditor 5 Image Remove Event Callback Plugin