How to catch error event with custom validation message uploding file to ckeditor?

Question

When in Laravel 8 with ckeditor 5 I try to upload file which does not satisfy validation rules in app/Http/Requests/UploadImageRequest.php file

I see alert with message :

Couldn't upload file: a2.jpg.

If there is a way to catch error event with custom validation message and show it to user ?

I set validation errors/custom messages on laravel side, problem is to get and show laravel custom messages in ckeditor js methods. ckeditor docs(https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html) has some function I try to work on them: When XMLHttpRequest request is sent I try to catch error say if file is too big. Setting logs on server I see that validation methods are trigered, but not controil method is not not triggered - so it was invalid validation :

On client I have :

ClassicEditor
    .create(document.querySelector('#content_textarea'), {
        extraPlugins: [SimpleUploadAdapterPlugin],
    })


    .then(editor => {



// CKEditor BLOCK END
class MyUploadAdapter {
    constructor(loader) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }

    // Aborts the upload process.
    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        // Note that your request may look different. It is up to you and your editor
        // integration to choose the right communication channel. This example uses
        // a POST request with JSON as a data structure but your configuration
        // could be different.
        // xhr.open( 'POST', 'http://example.com/image/upload/path', true );
        console.log('_initRequest image_upload  xhr::')
        console.log(xhr)

        xhr.open('POST', '{{ route('admin.news_image_upload') }}', true);
        xhr.setRequestHeader('x-csrf-token', '{{ csrf_token() }}', true);
        xhr.responseType = 'json';

        console.log('-1 xhr.readyState::')
        console.log(xhr.readyState)
        console.log('xhr::')
        console.log(xhr)

        if (xhr.readyState === 1) {   //if error
            // error
        }
        if (xhr.readyState === 4){   //if complete
            if(xhr.status === 200){  //check if "OK" (200)
                popupAlert("News image", "Selected News image was successfully uploaded", 'success')
            } else {
                console.log('xhr::')
                console.log(xhr)
                // error_handle_function(); //otherwise, some other code was returned
            }
        }
    }

    // Initializes XMLHttpRequest listeners.
    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `123 Couldn't upload file: ${file.name}.`;

        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;

            console.log('xhr::')
            console.log(xhr)
            console.log('-2 xhr.readyState::')
            console.log(xhr.readyState)
            console.log('response::')
            console.log(response)

            // This example assumes the XHR server's "response" object will come with
            // an "error" which has its own "message" that can be passed to reject()
            // in the upload promise.
            //
            // Your integration may handle upload errors in a different way so make sure
            // it is done properly. The reject() function must be called when the upload fails.

            if (!response || response.error) {
                console.log('response.error::')
                console.log(response.error)

                popupAlert("News Image", response.error.message, 'error')

                return false;
                // return reject(response && response.error ? response.error.message : genericErrorText);
            } else {
                popupAlert("News Image", "News Image upload", 'success')
            }

            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            // This URL will be used to display the image in the content. Learn more in the
            // UploadAdapter#upload documentation.
            resolve({
                default: response.url
            });
        });

        // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
        // properties which are used e.g. to display the upload progress bar in the editor
        // user interface.
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    // Prepares the data and sends the request.
    _sendRequest(file) {
        // Prepare the form data.
        const data = new FormData();

        data.append('upload', file);

        // Important note: This is the right place to implement security mechanisms
        // like authentication and CSRF protection. For instance, you can use
        // XMLHttpRequest.setRequestHeader() to set the request headers containing
        // the CSRF token generated earlier by your application.

        // Send the request.
        this.xhr.send(data);
    }
} // class MyUploadAdapter {

I see that even on validation fail, xhr.readyState=4 and I see strange data in xhr object: https://prnt.sc/rsUuru-X55VF

How can I get these validation message ?

Thanks in advance!