# Uploadcare image uploader and editor

Uploadcare is a dedicated image manager supporting image upload and editing. The Uploadcare feature lets you easily upload images from various services like Dropbox, Facebook, Google Drive, Google Photos, or OneDrive and insert them into your content. It offers an image editor with multiple editing options, optimization capabilities and provides a [responsive images mechanism](../images/images-responsive.md) for CKEditor 5.

> **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/)

<a id="how-uploadcare-enhances-ckeditor-5">

## How Uploadcare enhances CKEditor 5

As a full-fledged image uploader and editor, Uploadcare also replaces the basic CKEditor 5 image upload feature. It provides image upload and editing capabilities:

* Enables images upload directly from services like Dropbox, Facebook, Google Drive, Google Photos, OneDrive.
* Enables images upload from local machine and directly via external URL.
* Enables drag & drop uploads of images.
* Transforms the _Image_ toolbar button, allowing the user to quickly upload and insert images.
* Adds a separate dedicated image toolbar button to quickly open image editor for selected image.
* Provides image editing capabilities like crop, resize, rotate, flip, apply filters, and adjust image parameters (like contrast, brightness, saturation).
* Uploadcare storage is powered by AWS S3 and you can use your own bucket.

With Uploadcare you no longer need to write a server-side code to upload and edit images.

To find out more about Uploadcare, visit the [Uploadcare website](https://uploadcare.com/).

> **Warning**
>
> Uploadcare is available as a premium add-on in CKEditor plans and cannot be linked to an existing Uploadcare account. If you need more details or assistance, [contact us](https://ckeditor.com/contact).

<a id="demo">

## Demo

To upload a file using Uploadcare, use the upload image toolbar button and choose the provider you want to upload from. You can choose more than one file at a time. Use the edit image button from the image contextual toolbar to edit the selected image.

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

Image files are inserted into the content as images that you can drag around and resize.

You can also upload images by dragging them into your content. After you drag an image into the editor, it gets uploaded into the Uploadcare cloud storage and inserted into the content.

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

The Uploadcare upload feature requires following image plugins to work correctly:

* [The `Image` feature](../../api/module_image_image-Image.md),
* [The `ImageUpload` feature](../../api/module_image_imageupload-ImageUpload.md),
* [The `ImageInsert` feature](../../api/module_image_imageinsert-ImageInsert.md),
* [The `PictureEditing` feature](../../api/module_image_pictureediting-PictureEditing.md).

Make sure to include them during editor setup:

**NPM**

```js
import { ClassicEditor, Image, ImageUpload, ImageInsert, PictureEditing } from 'ckeditor5';
import { Uploadcare } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Uploadcare, Image, ImageUpload, ImageInsert, PictureEditing, /* ... */ ],
		toolbar: [ 'ImageInsert', /* ... */],
		// Provide Uploadcare license key (see explanation below).
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			// Further configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Image, ImageUpload, ImageInsert, PictureEditing } = CKEDITOR;
const { Uploadcare } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Uploadcare, Image, ImageUpload, ImageInsert, PictureEditing, /* ... */ ],
		toolbar: [ 'ImageInsert', /* ... */],
		// Provide Uploadcare license key (see explanation below).
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			// Further configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Further in the document, the dependency plugins will be omitted in code listings for clarity.

<a id="adding-image-editing-capabilities">

### Adding image editing capabilities

To add image editor allowing to invoke it straight from the image contextual toolbar (available when an image is selected), the `UploadcareImageEdit` plugins needs to be loaded and added to the toolbar configuration.

> **Note**
>
> The Uploadcare image editor requires the [`ImageToolbar`](../../api/module_image_imagetoolbar-ImageToolbar.md) feature. Make sure it is loaded too.

**NPM**

```js
import { ClassicEditor, ImageToolbar } from 'ckeditor5';
import { Uploadcare, UploadcareImageEdit } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Uploadcare, UploadcareImageEdit, ImageToolbar, /* ... */ ],
		toolbar: [ ImageUpload, /* ... */],
		image: {
			toolbar: [ /* ... */ , 'uploadcareImageEdit' ]
		}
		// Provide Uploadcare license key (see explanation below).
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			// Further configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, ImageToolbar } = CKEDITOR;
const { Uploadcare, UploadcareImageEdit } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Uploadcare, UploadcareImageEdit, ImageToolbar, /* ... */ ],
		toolbar: [ ImageUpload, /* ... */],
		image: {
			toolbar: [ /* ... */ , 'uploadcareImageEdit' ]
		}
		// Provide Uploadcare license key (see explanation below).
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			// Further configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Further in the document, the dependency plugins will be omitted in code listings for clarity.

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../../getting-started/licensing/license-key-and-activation.md) guide for details.

After you purchase a license, log into your Uploadcare customer dashboard to create a public API key, as explained in the [Uploadcare Project settings guide](https://uploadcare.com/docs/start/settings/#keys-public).

<a id="configuration">

## Configuration

The feature can be configured via the [`config.uploadcare`](../../api/module_uploadcare_uploadcareconfig-UploadcareConfig.md) object.

<a id="choosing-services-to-upload-from">

### Choosing services to upload from

Uploadcare feature allows uploading images from multiple external services - Dropbox, Facebook, Google Drive, Google Photos, OneDrive, and from local machine and external URLs. The list of allowed upload methods is configurable via [`config.uploadcare.uploader.sourceList`](../../api/module_uploadcare_uploadcareconfig-UploadcareUploaderConfig.md#member-sourceList).

Available options are:

* `dropbox`
* `facebook`
* `gdrive`
* `gphotos`
* `onedrive`
* `local`
* `url`

For example, to allow users to upload images from local computer, Dropbox and OneDrive, the configuration would look as below:

```js
ClassicEditor
	.create( {
		uploadcare: {
			uploader: {
				sourceList: [
					'local',
					'dropbox',
					'onedrive'
				]
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="editing-external-images">

### Editing external images

To enable Uploadcare to edit external images (not hosted by the Uploadcare service) you need to whitelist the URLs of the images. You can do this using the [`config.uploadcare.allowExternalImagesEditing`](../../api/module_uploadcare_uploadcareconfig-UploadcareConfig.md#member-allowExternalImagesEditing) option:

```js
ClassicEditor
	.create( {
		uploadcare: {
			allowExternalImagesEditing: [ 'origin', /^cksource.com/ ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

The image is editable if this option is:

* a regular expression and it matches the image URL, or
* a custom function that returns true for the image URL, or
* `origin` literal and the image URL is from the same origin, or
* an array of the above and the image URL matches one of the array elements.

> **Warning**
>
> Make sure that the domains you whitelist have CORS enabled, allowing to fetch the images from that domain. If you whitelist a domain without proper CORS configuration, you will get errors from the editor.

> **Note**
>
> Please keep in mind that when you edit any external image for the first time it will be automatically uploaded to the Uploadcare cloud. This is important to know, since it affects the quota usage.

<a id="adjusting-other-configuration-options">

### Adjusting other configuration options

Uploadcare feature configuration directly exposes other Uploadcare configuration options, and those can be set via CKEditor 5 configuration directly. Please refer to official Uploadcare documentation to get familiar with all configuration options.

The configuration related to upload process should be set via [`config.uploadcare.uploader`](../../api/module_uploadcare_uploadcareconfig-UploadcareConfig.md#member-uploader) object:

```js
ClassicEditor
	.create( {
		uploadcare: {
			uploader: {
				cropPreset: '1:1',
				imageShrink: '800x600'
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Please see all available options in [the official Uploadcare documentation](https://uploadcare.com/docs/file-uploader/options/).

> **Warning**
>
> The `imgOnly`, `removeCopyright`, `localeName`, `confirmUpload`, `cameraMirror`, `cameraCapture`, `showEmptyList` options are not supported at all at the moment. Changing them will not have any effect. For locale configuration, use the `locale` option instead of `localeName`.

The configuration related to image editor should be set via [`config.uploadcare.editor`](../../api/module_uploadcare_uploadcareconfig-UploadcareConfig.md#member-editor) object:

```js
ClassicEditor
	.create( {
		uploadcare: {
			editor: {
				cropPreset: '5:4'
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Please see all available options in [the official Uploadcare documentation](https://uploadcare.com/docs/file-uploader/image-editor/#configuration).

<a id="locale-configuration">

### Locale configuration

Since the Uploadcare integration plugin bases on an external component, it is necessary to make an extra step to provide translations for the Uploadcare component.

You can provide the translations using the [`config.uploadcare.locale`](../../api/module_uploadcare_uploadcareconfig-UploadcareConfig.md#member-locale) option.

The plugin automatically uses the editor’s language (`editor.locale.contentLanguage`) as the locale name. If the editor language is different from `'en'`, you need to provide translations for that language (see the examples below). The `locale` property is used only to supply translations that will be used by Uploadcare components.

For information on how to configure the editor’s language, see the [CKEditor 5 localization documentation](../../framework/deep-dive/ui/localization.md).

<a id="using-cdn-translations">

#### Using CDN translations

Load pre-defined translations from Uploadcare CDN:

```js
// Dynamic import
ClassicEditor
	.create( {
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			locale: () => import( 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/locales/file-uploader/de.js' )
				.then( module => module.default )
		}
	} );

// Or static import
import deLocale from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/locales/file-uploader/de.js';

ClassicEditor
	.create( {
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			locale: deLocale
		}
	} );
```

<a id="using-custom-translations">

#### Using custom translations

Provide your own translation object:

```js
ClassicEditor
	.create( {
		uploadcare: {
			pubkey: 'YOUR_UPLOADCARE_KEY',
			locale: {
				'locale-id': 'de',
				'social-source-lang': 'de',
				'upload-file': 'Datei hochladen',
				'file__one': 'Datei',
				'file__other': 'Dateien',
				'header-uploading': 'Lade {{count}} {{plural:file(count)}} hoch',
				// More translations.
			}
		}
	} );
```

> **Note**
>
> For detailed information about Uploadcare locale definition format, available languages, and CDN translations, see the [Uploadcare localization documentation](https://uploadcare.com/docs/file-uploader/localization/).

<a id="common-api">

## Common API

The [`Uploadcare`](../../api/module_uploadcare_uploadcare-Uploadcare.md) plugin registers:

* The `'uploadcare'` UI button component for uploading images.
* The `'uploadcare'` command implemented by the [`UploadcareCommand`](../../api/module_uploadcare_uploadcarecommand-UploadcareCommand.md).

You can open Uploadcare upload dialog by executing the following code:

```js
editor.execute( 'uploadcare' );
```

If you want to use the Uploadcare editing capabilities straight from the editor, the [`UploadcareImageEdit`](../../api/module_uploadcare_uploadcareimageedit-UploadcareImageEdit.md) plugin will register the following:

* The `'uploadcareImageEdit'` UI button component in the Image toolbar for the uploadcare image editor.
* The `'uploadcareImageEdit'` command implemented by the [`UploadcareImageEdit`](../../api/module_uploadcare_uploadcareimageedit-UploadcareImageEdit.md).

You can open Uploadcare image edit dialog by executing the following code:

```js
editor.execute( 'uploadcareImageEdit' );
```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="whats-next">

## What’s next

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

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

---

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