best way for managing uploaded files in my editor?

Question

I'm working on a social blog that has an editor built in JavaScript for creating a blog by a user. One of my biggest issues is uploading files and its limitations. Right now for auto-saving user posts, I store images uploaded simultaneously to the server. But the problem is when the user deletes images from the editor because:

• The number of requests might be too much (even when there are a lot)
• In Ckeditor I have a procedure for uploading, but there are not for deleting it from server (or at least I don't know how)
• and finally is that good idea for auto-saving (?)

My editor is a customized version of ckeditor5, and for uploading files, I use an uploadadapter like :

export default class UploadAdapter {
    constructor(loader, article) {
        this.loader = loader;
        this.article = article;
    }
    upload() {
        return new Promise((resolve, reject) => {
            let image = new FormData();
            let url = '/articles/imageUpload';
            image.append('upload', this.loader.file);
            image.append('token', this.article.token);

            axios.post(url, image)
                .then(response => {
                    console.log(response);
                    if (response.data.uploaded) {
                        resolve({
                            default: response.data.url,
                        });
                    }
                    else {
                        reject(response.data.error.message);
                    }
                }).catch(error => {
                console.log(error);
            });
        });
    }
}

Answer 1

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);
            } ) );
   };
}

Answer 2

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.