Base64 image upload adapter

The Base64 image upload adapter plugin converts images inserted into the rich-text editor into Base64-encoded strings in the editor output.

This kind of image upload does not require any server-side processing — images are stored with the rest of the text and displayed by the web browser without additional requests. On the downside, this approach can bloat your database with very long data strings which has a negative impact on the performance.

Please remember that while Base64 upload is a very easy solution, it is also highly inefficient. The image file itself is kept as data in the database, generating a much heavier data load and higher transfer. Base64 images are never cached by the browser so loading and saving such data will always be slower.

This can be troublesome for some features: revision history may hence take longer to load revisions; the same applies e.g. to comments. Content with Base64 images may also exceed the allowed file size when your document is exported to PDF or to Word.

Therefore using the Base64 feature is a less efficient option to use than some other available ones. Check out the comprehensive image upload overview guide to learn about other ways to upload images into CKEditor 5.

# Demo

Use the editor below to see the adapter in action. Open the web browser console and click the button below to see the base64–encoded image in the editor output data.

CKEditor 5 offers multiple ways to include images in your rich content. You can choose whichever you find more comfortable and efficient for you needs. Use classic interface, or boost productivity with the advanced image handling offered.

Paste or drop an image directly into the editor. You can also use the "Insert image" button in the toolbar.

# Installation

First, install the @ckeditor/ckeditor5-upload package:

npm install --save @ckeditor/ckeditor5-upload

Add the Base64UploadAdapter to your plugin list:

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Base64UploadAdapter, ... ],
        toolbar: [ ... ]
    } )
    .then( ... )
    .catch( ... );

Once enabled in the plugin list, the Base64 image upload adapter works out–of–the–box without any additional configuration.

# Configuration

# Configuring allowed file types

The allowed file types that can be uploaded should actually be configured in two places:

On the client side, in CKEditor 5, restricting image upload through the CKEditor 5 UI and commands.
On the server side, in your server configuration.

# Client-side configuration

Use the image.upload.types configuration option to define the allowed image MIME types that can be uploaded to CKEditor 5.

By default, users are allowed to upload jpeg, png, gif, bmp, webp and tiff files. You can customize this behavior to accept, for example, SVG files (in this case use svg+xml type).

# Server-side configuration

It is up to you to implement any filtering mechanisms on your server in order to restrict the types of images that are allowed to be uploaded.

# What’s next?

Check out the comprehensive Image upload overview to learn more about different ways of uploading images in CKEditor 5.

See the Image feature guide to find out more about handling images in CKEditor 5 WYSIWYG editor.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-upload.

Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.