If suppose the user uploaded the image but later he decided to remove the image using backspace or delete then how it will delete from the database. Currently, it's not deleting from the database and creating the junks.
Please advise
My solution is, I save the contents of the editor in my database as HTML.
And I have 2 states in my component: the current state of the editor (editorState) and the state of the editor with the content that is saved by the user (savedState).
When user hits 'save' I update savedState to be equal to editorState, and so I have the images that where saved by the user and the ones that are not.
So, I can't delete an image from the server when user hits backspace on it, but when he leaves the page, I can get all images that are not in the editorState, but are in the savedState (this ones are the ones that were deleted) and send the request to my server to delete them.
This is not the best way of doing it, but I implemented it this way and it's working.
I'll now refactor to a better solution:
A best solution is to have a temporaryFiles folder in your server and upload the images there when user inserts them in the editor. When he hits 'save' you send this images to the general uploadedFiles folder. And it's good to have a folder dedicated only to this use case.
Then it gets easier for you to know what files should be deleted. If user leaves the page, you delete all files in the temporary folder because those where not saved.