CKEditor 5 Register More Than One Upload Adapter

Viewed 1159

I use CKEditor 5 to implement an editor to our software. I want to upload images and videos with this editor. It has image plugin. I customized ckfinder upload adapter to upload images to our server. It works perfect. I uploaded images and show them in the editor successfully. Then I wanted to upload video files to our server. So I created a video plugin for ckeditor to upload, display videos. Also I created another upload adapter to upload videos to our server. In this point, ckeditor filerepository plugin accepted only one adapter. Two adapter was imported but filerepository used last imported adapter. I want to use image upload adapter to upload images and video upload adapter to upload videos. But I can't figure it out.

Image upload adapter is initialized with this code:

init() {
    const url = this.editor.config.get( 'imgUpload.url' );

    if ( !url ) {
        return;
    }

    this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new ImgUploadAdapter( loader, url, this.editor.t );
}

Video upload adapter is initialized with this code:

init() {
    const url = this.editor.config.get( 'videoUpload.url' );

    if ( !url ) {
        return;
    }

    this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new VideoUploadAdapter( loader, url, this.editor.t );
}

How can I tell the filerepository to use image upload adapter for images and video upload adapter for videos seperately? Is this possible?

1 Answers

In the loader param you get an instance of FileLoader which exposes the native File object in the FileLoader#file property. That means that at this stage you can access the file name via:

this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => {
    const fileName = loader.file.name;

    if ( fileName.endsWith( '.mov' ) ) {
        return new FileUploadAdapter( ... );
    } else {
        return new GenericUploadAdapter( ... );
    }
};
Related