best way for managing uploaded files in my editor?

I used the below to embed the images as base64 instead of uploading them

class UploadAdapter {   constructor( loader ) {      this.loader = loader;   }   upload() {      return this.loader.file            .then( file => new Promise( ( resolve, reject ) => {                  var myReader= new FileReader();                  myReader.onloadend = (e) => {                     resolve({ default: myReader.result });                  }                  myReader.readAsDataURL(file);            } ) );   };}

IMHO first you should define your goals, then search for the solution.

• Do you want your users to have a nice feature-rich file manager? It would allow them to choose from already uploaded images. One can work on preparing and uploading images, others would just choose them and paste them into the editor.
• Are you just willing to have a drag&drop solution and upload those images somewhere without wondering about the storage?
• Do you need to keep track changes over the edited content?
• Do you want to allow end-users to re-use already uploaded files?

Managing images removed from the content can be tricky depending on the needs. For example, if you want to keep track changes and allow users to re-use uploaded images in other posts - before removing any image from the storage you should check all posts and all versions if they do not contain this image anymore. OTOH if you don't care about versions and do not allow users to re-use images - then you can remove any image just after it's removed from the content.

Nowadays storage is cheap, so I wouldn't bother that much about keeping some extra images that are not used anymore. And what's more important - I wouldn't add the clean-up to the main flow. Rather than that - create a dedicated, repeated job for scanning the content and removing unused images. To make it more robust I would save the image usages in some kind of database. This way it would be much easier to perform the clean-up.

There are out-of-the-box paid solutions like EasyImage (upload, re-scale and optimize images to the CDN), or CKFinder (fully-featured file manager).

Although, depending on your needs you may need to tune those solutions anyway. For example, if you have a file manager then maybe you would like to block deleting files if they are used anywhere. So additional work on some plugin might be needed.

Don't know this will help you or not. But i used to solve this remove image issue like this.

I used summernote editor.

Steps i followed when i inserting images with other contents:

Collected all the images from editor

$images = $dom->getelementsbytagname('img');

Here i receiving the images as base64. thats why i needed to decode them and store separately

$imagePaths = [];foreach($images as $k => $img){        $data = $img->getattribute('src');        $check_image = substr($data,0,10);        if($check_image != "data:image"){            continue;        }        list($type, $data) = explode(';', $data);        list(, $data)      = explode(',', $data);        $data = base64_decode($data);        $image_name = time().$k.'.png';        $path = public_path("/").ImagePaths::$BLOG_DETAILS_PICTURE.'/'.$image_name;        file_put_contents($path, $data);        $img->removeattribute('src');        $img->setattribute('src', asset(ImagePaths::$BLOG_DETAILS_PICTURE.'/'.$image_name));        $imagePaths[] = $path; // This path for store in DB    }

When i delete or update the content i just remove all the images which i received in $imagePaths array previously and stored.

When i worked on this, i followed this documentation

Here i shared full controller script.