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

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.

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

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

Appreciation of diversity

Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.

The real voyage of discovery consists not in seeking new landscapes, but having new eyes.

Marcel Proust

Improvisation

Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes up and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks now:

• buy the ticket
• start your adventure

Confidence

Going to a new place can be quite terrifying. While change and uncertainty make us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there is nothing to be afraid of, is the moment you discover bliss.

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.

# Installation

After installing the editor, add the feature to your plugin list and toolbar configuration.

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

• The Image feature,
• The ImageUpload feature,
• The ImageInsert feature,
• The PictureEditing feature.

Make sure to include them during editor setup:

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

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		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.

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

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

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		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.

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation 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.

# Configuration

The feature can be configured via the config.uploadcare object.

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

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:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        uploadcare: {
            uploader: {
                sourceList: [
                    'local',
                    'dropbox',
                    'onedrive'
                ]
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 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 option:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        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.

# 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 object:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        uploadcare: {
            uploader: {
                cropPreset: '1:1',
                imageShrink: '800x600'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Please see all available options in the official Uploadcare documentation.

The configuration related to image editor should be set via config.uploadcare.editor object:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        uploadcare: {
            editor: {
                cropPreset: '5:4'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Please see all available options in the official Uploadcare documentation.

# Common API

The Uploadcare plugin registers:

• The 'uploadcare' UI button component for uploading images.
• The 'uploadcare' command implemented by the UploadcareCommand.

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

editor.execute( 'uploadcare' );

If you want to use the Uploadcare editing capabilities straight from the editor, the UploadcareImageEdit 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.

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

editor.execute( 'uploadcareImageEdit' );

# What’s next

Be sure to check out the comprehensive Image upload overview guide 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 in general.