CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 5/API
Interface

UploadAdapter (upload)

@ckeditor/ckeditor5-upload/src/filerepository

interface

Upload adapter interface used by FileRepository to handle file upload. Upload adapter is a bridge between the editor and server that handles file uploads. It should contain logic necessary to initiate upload process and monitor its progress.

It should implement two methods:

Example upload adapter implementation:

class UploadAdapter {
    constructor( loader ) {
        // Save Loader instance to update upload progress.
        this.loader = loader;
    }

    upload() {
        // Update loader's progress.
        server.onUploadProgress( data => {
            loader.uploadTotal = data.total;
            loader.uploaded = data.uploaded;
        } ):

        // Return promise that will be resolved when file is uploaded.
        return server.upload( loader.file );
    }

    abort() {
        // Reject promise returned from upload() method.
        server.abortUpload();
    }
}

Then upload adapter can be set to be used by FileRepository:

editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
    return new UploadAdapter( loader );
};

Filtering

Methods

  • abort()

    Aborts the upload process. After aborting it should reject promise returned from upload().

    Take a look at example Adapter implementation and createUploadAdapter method.

  • upload() → Promise

    Executes the upload process. This method should return a promise that will resolve when data will be uploaded to server. Promise should be resolved with an object containing information about uploaded file: 

    {
    default: 'http://server/default-size.image.png'
}

    Additionally, other image sizes can be provided:

    {
    default: 'http://server/default-size.image.png',
    '160': 'http://server/size-160.image.png',
    '500': 'http://server/size-500.image.png',
    '1000': 'http://server/size-1000.image.png',
    '1052': 'http://server/default-size.image.png'
}

    NOTE: When returning multiple images, the widest returned one should equal the default one. It is essential to correctly set width attribute of the image. See this discussion: https://github.com/ckeditor/ckeditor5-easy-image/issues/4 for more information.

    Take a look at example Adapter implementation and createUploadAdapter method.

    Returns

    Promise

    Promise that should be resolved when data is uploaded.