# Base64 image upload adapter

The Base64 image upload adapter converts inserted images into [Base64-encoded strings](https://en.wikipedia.org/wiki/Base64) in the [editor output](../../../getting-started/setup/getting-and-setting-data.md). The images are stored with other content in the database without any server-side processing.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

> **Warning**
>
> Remember that while `Base64` upload is an easy solution, it is also highly inefficient. The image file 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](../../collaboration/revision-history/revision-history.md) may hence take longer to load revisions. The same applies to [comments](../../collaboration/comments/comments.md). Content with `Base64` images may also exceed the allowed file size when your document is [exported to PDF](../../converters/export-pdf.md) or [to Word](../../converters/export-word.md).
>
> Therefore using the `Base64` feature is a less efficient option to use than some other available ones. Check out the comprehensive [image upload overview](image-upload.md) guide to learn about other ways to upload images into CKEditor 5.

<a id="demo">

## Demo

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../../../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Base64UploadAdapter } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Base64UploadAdapter, /* ... */ ],
		toolbar: [ /* ... */ ]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Base64UploadAdapter } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		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.

<a id="configuration">

## Configuration

<a id="configuring-allowed-file-types">

### 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.

<a id="client-side-configuration">

#### Client-side configuration

Use the [`image.upload.types`](../../../api/module_image_imageconfig-ImageUploadConfig.md#member-types) configuration option to define the allowed image MIME types that can be uploaded to CKEditor 5.

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

<a id="server-side-configuration">

#### Server-side configuration

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

<a id="whats-next">

## What’s next

Check out the comprehensive [Image upload overview](image-upload.md) to learn more about different ways of uploading images in CKEditor 5.

See the [Image feature guide](../images-overview.md) to find out more about handling images in CKEditor 5 WYSIWYG editor.

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)