Delete uploaded image when it's removed from the editor

[f-rostami]

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.

[aramis-it]

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

[roohollah0azari]

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

[jslalriya]

Well, there is a workaround. Its bit technical, but with this workaround, any image which, you will delete from the textarea (CKEditor), it will also delete the same image from the folder sitting on your server. Its working 100%! You do NOT need to implement any JavaScript codes or need any plugin to do so.

In order to explain it, I would need to add screenshots which, unfortunately I cannot add them here on this post. Shortly I will be writing an article on my site explaining it in greater details and then post the link to the article here. So, check back soon!

By the way would it be nice to create a video or an article? Please reply!

[dinezh256]

yes, please

Well, there is a workaround. Its bit technical, but with this workaround, any image which, you will delete from the textarea (CKEditor), it will also delete the same image from the folder sitting on your server. Its working 100%! You do NOT need to implement any JavaScript codes or need any plugin to do so.

In order to explain it, I would need to add screenshots which, unfortunately I cannot add them here on this post. Shortly I will be writing an article on my site explaining it in greater details and then post the link to the article here. So, check back soon!

By the way would it be nice to create a video or an article? Please reply!

[MausamGaurav]

Well, there is a workaround. Its bit technical, but with this workaround, any image which, you will delete from the textarea (CKEditor), it will also delete the same image from the folder sitting on your server. Its working 100%! You do NOT need to implement any JavaScript codes or need any plugin to do so.

In order to explain it, I would need to add screenshots which, unfortunately I cannot add them here on this post. Shortly I will be writing an article on my site explaining it in greater details and then post the link to the article here. So, check back soon!

By the way would it be nice to create a video or an article? Please reply!

Can you please provide a link to your article, whenever you are done! The issue with this approach though is that if you use an image from the browse server option - most likely that image sitting on the server is already being used by something else. If you delete that image it might break something else. So your approach would definitely work, but to make it more robust you would need to disable the browse server option.

[jslalriya]

Well, first, it looks like NOT many people are looking for this solution because, so far only two people responded to my comments. Therefore, I don't know if it's worth spending a few hours to write the article or not as I am pretty busy lately. Secondly, the fix I found will give you the option to delete or not to delete the same image (if there is any) sitting on the server. You can delete the existing image if there is any, and you can also keep the existing image if needed, it's all up to you, you will control it. In other words, the workaround is fully tested and works 110% without any glitch!

[MausamGaurav]

Well, first, it looks like NOT many people are looking for this solution because, so far only two people responded to my comments. Therefore, I don't know if it's worth spending a few hours to write the article or not as I am pretty busy lately. Secondly, the fix I found will give you the option to delete or not to delete the same image (if there is any) sitting on the server. You can delete the existing image if there is any, and you can also keep the existing image if needed, it's all up to you, you will control it. In other words, the workaround is fully tested and works 110% without any glitch!

Thanks for explaining. It appears you have found a genuine solution. No worries, you can write that post or the solution sometimes later, at your convenience. I was looking for the solution almost 2 years ago and then almost forgot. I think a lot of the community would benefit from your solution. However, not everyone would stumble upon this thread on GitHub.

[kl3sk]

@jslalriya I am one of those how be interested in. Any rough writing yet ?

[shiva2021]

I found a plugin --> https://github.com/shibbirweb/ckeditor5-image-remove-event-callback-plugin

Its quite easy to implement in VueJs as well, though it took me almost a day to figure out the right way

[Barath-Codes]

I found a plugin --> https://github.com/shibbirweb/ckeditor5-image-remove-event-callback-plugin

Its quite easy to implement in VueJs as well, though it took me almost a day to figure out the right way

Could you please share the docs that you used for reference to work with you to handle delete event...

[a3803896]

I found a plugin --> https://github.com/shibbirweb/ckeditor5-image-remove-event-callback-plugin

Its quite easy to implement in VueJs as well, though it took me almost a day to figure out the right way

Could you please share the right way to import this plugin on vue.js ?

[shiva2021]

Hi @a3803896 and @BarathAspi : You can find the code snippet here--> https://github.com/shiva2021/resuable-ckeditor-component/blob/main/ckeditor.vue

Here's what I have done:

1. Installed the plugin in my project.

2. Imported the plugin in my component (line 37). This plugin expects a callback function which is your own implementation to handle the image deletion.

3. I have added this plugin in the editorConfig. (Line 71). This will add an event called imageRemoveEvent in the CKEditor where you need to pass a callback function.

4. I have created a method (line 165), where I can write my own implementation.

5. Inside the created lifecycle event (line: 152), I have passed this callback method in the imageRemoveEvent of the CKEditor.

Let me know if you need anymore input.

@BarathAspi : Apologies for my delayed response.

[helenatxu]

Well, first, it looks like NOT many people are looking for this solution because, so far only two people responded to my comments. Therefore, I don't know if it's worth spending a few hours to write the article or not as I am pretty busy lately. Secondly, the fix I found will give you the option to delete or not to delete the same image (if there is any) sitting on the server. You can delete the existing image if there is any, and you can also keep the existing image if needed, it's all up to you, you will control it. In other words, the workaround is fully tested and works 110% without any glitch!

@jslalriya So far, no article or video right? I found this thread but in the end there is no solution :/

I'll checkout that plugin.

[vasimvaistratechnologies]

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

its any ways to use this with react js

[futurbotconsolidated]

@vasimvaistratechnologies you can build your own ckeditor instance and then use it in config

[roohollah0azari]

Hi. Thank you for your helps. But after wrote this question i solved this problem by detecting deleted images on textarea(ckeditor) and delete that files from folder of server successfully by php. also if user tried to upload image but ignore from posting uploaded image to ckeditor, i detect that image not there on the editor and delete thats.

On چهارشنبه ۲۴ نوامبر ۲۰۲۱،‏ ۱۱:۰۰ Abhey Sharma @.***> wrote:

@vasimvaistratechnologies https://github.com/vasimvaistratechnologies you can build your own ckeditor instance and then use it in config

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ckeditor/ckeditor5/issues/950#issuecomment-977604528, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARAFZY3KVDI2UBSWGXTOWNLUNSIBVANCNFSM4EZLY3MQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[futurbotconsolidated]

@roohollah0azari Kindly put your code here, so it could help everyone. Thanks!

[papscript]

Well, first, it looks like NOT many people are looking for this solution because, so far only two people responded to my comments. Therefore, I don't know if it's worth spending a few hours to write the article or not as I am pretty busy lately. Secondly, the fix I found will give you the option to delete or not to delete the same image (if there is any) sitting on the server. You can delete the existing image if there is any, and you can also keep the existing image if needed, it's all up to you, you will control it. In other words, the workaround is fully tested and works 110% without any glitch!

@jslalriya what the hecc are these trailers of the solution? We're on instagram or what? I have the solution that will solve all of your problems. I just need enough attention. Please like and subscribe. Trust me guys. Why can't you add images here? It's technically possible, what's the problem? Where's your website?

You've spend time writing trailer#1 and trailer#2 here in the thread instead of explaining the magic solution you have. Please next time don't wast our time to read your ads. Talk is cheap, show me the code.

[topskishan]

@vasimvaistratechnologies you can build your own ckeditor instance and then use it in config

can you please elaborate your answer by some snippet or articles link

[rodude123]

I have a solution for the simple upload adapter. Firstly you add images as usual, and the simple upload adapter will make an AJAX request and upload the images. If you're using it in a form like me, when you have submitted the form on the backend, in the code, you can find all the image tags or all the markdown image syntax if using it that way and then find the source locations and put them in a list. Afterwards, you can loop through the list of images to check which ones are still in the uploaded directory; for the rest that is not in the code, you can delete them. The only issue with this is you could get duplicate images for each submitted form, but if that's not an issue for you, then this could work. A way to get around this will be to check if the uploaded image exists in all directories you'd want to check in. For example, I'm using this for a blog, so when I submit a form, I'm submitting a form for each blog post, so I'd have a folder for each blog post where images are stored. I have a parent directory where all the folders are stored for each blog post, so I could check those as well when uploading each image. Once I've created it, I will add another comment with my solution below, although written in PHP.

[abelini]

I have a solution for the simple upload adapter. Firstly you add images as usual, and the simple upload adapter will make an AJAX request and upload the images. If you're using it in a form like me, when you have submitted the form on the backend, in the code, you can find all the image tags or all the markdown image syntax if using it that way and then find the source locations and put them in a list. Afterwards, you can loop through the list of images to check which ones are still in the uploaded directory; for the rest that is not in the code, you can delete them.

Actually, this is a good "simple" solution for the "simple upload adapter". Thank you.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.