ckeditor5 vue检查已删除的图像

Question

i am using ckeditor5 vue version for my article form from this package and it also come with example handling image upload by adding this code

UploadAdapter: function (loader) {
    this.loader = loader
    this.upload = () => {
        const body = new FormData();
        body.append('gambar', this.loader.file);

        let token = window.localStorage.getItem('token');

        return fetch('https://bkcuvue.test/api/v1/artikel/upload', {
            headers: {"Authorization": 'Bearer ' + token},
            body: body,
            method: 'POST'
        })
            .then(response => response.json())
            .then(downloadUrl => {
                return {
                    default: downloadUrl
                }
            })
            .catch(error => {
                console.log(error);
            });
    }
    this.abort = () => {
        console.log('Abort upload.')
    }
},

and then on my backend (laravel) is just like this

public function upload(Request $request)
    {
        if(!empty($request->gambar))
            $fileName = Helper::image_processing($this->imagepath,$this->width,$this->height,$request,'');
        else
            $fileName = '';

        return response()->json('/' . $this->imagepath . $fileName . '.jpg');
    }

to the ckeditor component

<vue-ckeditor type="classic" v-model="htmlContent" :upload-adapter="UploadAdapter"></vue-ckeditor>

and it works! but the problem that soon i realize is because this method is uploading the image to the server and then returning image path to or editor which will be saved to the database as a plain html tags...

then if for example i upload image and then i want to remove or maybe change the image then the editor will delete the img tag from the editor but not the real image file on the server....

the image file will remain on the server and there is no way i can delete it unless i select the image and delete it myself by going into server by ftp or ssh manualy.

is there any way to check if the image tag is deleted then it will delete on the server. Or maybe there is a way in backend to check if this image file is not used by any article...

and also if i upload the same image twice then it will also uploading to the server twice the same file, how can i detect if the same image file is already on the server and not upload duplicate but immediately return the image path

Answer 1

I use this method, upload the images and save the URLs. When I send the content of editor also send the URLs and on the server i compare that the URLs are in the content of the editor and those that are not i delete the corresponding file.

Client:

onChange={ ( event, editor ) => {

  this.state.description = editor.getData();

  var vm = this

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

  urls.forEach(function(element) {
    if (String(element).length > 10) {
      if (vm.state.filesCKeditor.length > 0) {
        if(filter(vm.state.filesCKeditor, function(o) { return String(o) === String(element) }).length == 0)
         {
           vm.state.filesCKeditor.push(element)
         }
       }else{
         vm.state.filesCKeditor.push(element)
       }
     }
   });
}}

Server:

foreach (explode(',',$this->post('filesCKeditor')) as $value) {
  # code...
  if (!isset(explode($value,$this->post('content'))[1])) {
    print_r('false');//add code for delete image
  }
}