Uncaught SyntaxError: Identifier 'MyUploadAdapter' has already been declared but works on reload

Viewed 19

I am currently creating a Laravel application and using CKEditor 5 to allow content updates to the site.

I am having an issue at the moment with a class declared within Javascript where on the first load, it will show an error saying that the class has already been declared.

Class already been declared Javascript

`


    class MyUploadAdapter {
        constructor( loader ) {
            this.loader = loader;
        }
     
        upload() {
            return this.loader.file
                .then( file => new Promise( ( resolve, reject ) => {
                    this._initRequest();
                    this._initListeners( resolve, reject, file );
                    this._sendRequest( file );
                } ) );
        }
     
        abort() {
            if ( this.xhr ) {
                this.xhr.abort();
            }
        }
     
        _initRequest() {
            const xhr = this.xhr = new XMLHttpRequest();
     
            xhr.open( 'POST', "http://localhost/control/pages/create?_token=p4NiGiEFy6B0tunxqzlBAASR3scQLUFN9mQkfN7f", true );
            xhr.responseType = 'json';
        }
     
        _initListeners( resolve, reject, file ) {
            const xhr = this.xhr;
            const loader = this.loader;
            const genericErrorText = `Couldn't upload file: ${ file.name }.`;
     
            xhr.addEventListener( 'error', () => reject( genericErrorText ) );
            xhr.addEventListener( 'abort', () => reject() );
            xhr.addEventListener( 'load', () => {
                const response = xhr.response;
     
                if ( !response || response.error ) {
                    return reject( response && response.error ? response.error.message : genericErrorText );
                }
     
                resolve( response );
            } );
     
            if ( xhr.upload ) {
                xhr.upload.addEventListener( 'progress', evt => {
                    if ( evt.lengthComputable ) {
                        loader.uploadTotal = evt.total;
                        loader.uploaded = evt.loaded;
                    }
                } );
            }
        }
     
        _sendRequest( file ) {
            const data = new FormData();
     
            data.append( 'upload', file );
     
            this.xhr.send( data );
        }
    }
     
    function MyCustomUploadAdapterPlugin( editor ) {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
            return new MyUploadAdapter( loader );
        };
    }
     
    ClassicEditor
        .create( document.querySelector( '#page_content' ), {
            extraPlugins: [ MyCustomUploadAdapterPlugin ],
        } )
        .catch( error => {
            console.error( error );
        } );
    

`

However, if I do a refresh, the CKEditor reloads with no errors.

enter image description here

CKEditor 5 to load so that it can be used to enter in content.

0 Answers
Related