With CKEditor, how to replace Image Upload Adapter error "alert" and with custom handler to notify user

Question

According to CK Editor, implementation of a custom upload adapter only supports two lifecycle methods: upload and abort. There doesn't seem to be any way to intercept the editor to custom handle alerting the user of upload errors. CK Editor displays an alert() message, which doesn't fit well with the application. I'd like to replace that alert with my own in-app model, but still have CK Editor manage the rest of the process, such as removing the image.

Here is an example of the alert. Clicking the 'OK' removes the image, which is good. I just want to tie into hooks to display my own custom model:

export class CKImageUploadAdapter implements UploadAdapter {

  constructor(private fileLoader: FileLoader, private uploader: FileUploader) {

  }

  upload(): Promise<Record<string, string>> {
      return this.fileLoader.file.then( file => this.uploader.upload( file ) );
  }

  abort() {
      this.uploader.abort();
  }
}

export class FileUploader {

  async upload(file: File): Promise<{}> {

        return this.uploader.upload()
                            .then(r => JSON.parse(<string>r.data))
                            .then((json) => {
                                if (json.error) {
                                  //  Notifiy editor of an error to
                                  //  handle image removal, but how 
                                  //  to hook into it or suppress 
                                  //  "alert()" window?
                                  throw new Error(json.error);  
                                }
                                //  I can pseudo "hook" here, which
                                //  also handles succuss result json
                                this.listener({ result: json });  
                                return json;
                            });
    });
    
 }

  abort() {
    this.uploader && this.uploader.abort();
  }

}

Result JSON on failure:

{
  "statusCode":413,
  "error":"Request Entity Too Large",
  "message":"Payload content length greater than maximum allowed: 5242880"
}

Result JSON on success:

{
   "default":"http://localhost:5000/content/61ef62de56e079fae13bb208",
   "720":"http://localhost:5000/content/61ef62de56e079fae13bb208/md",
   "380":"http://localhost:5000/content/61ef62de56e079fae13bb208/sm",
   "160":"http://localhost:5000/content/61ef62de56e079fae13bb208/xs"
}

Answer 1

In my case I overwrote the alert function. For example, I'm using sweetalert2 for my alerts.

window.alert = function(message) {
  Swal.fire('Alert', message, 'warning');
};

Notice that this will modify the alert() function globally in your app. For more info about alert function you can check this link.