Skip to main content

Image editor

Image editor. Designed to be used with the Dashboard UI.

Screenshot of the Image Editor plugin UI in Dashboard

When should I use this?

When you want to allow users to crop, rotate, zoom and flip images that are added to Uppy.

Install

npm install @uppy/core @uppy/dashboard @uppy/image-editor

Use

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import ImageEditor from '@uppy/image-editor';

import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/image-editor/dist/style.min.css';

new Uppy()
.use(Dashboard, { inline: true, target: '#dashboard' })
.use(ImageEditor, { target: Dashboard });

API

Options

info

If you automatically want to open the image editor when an image is added, see the autoOpenFileEditor Dashboard option.

id

A unique identifier for this plugin (string, default: 'ImageEditor').

quality

Quality Of the resulting blob that will be saved in Uppy after editing/cropping (number, default: 0.8).

cropperOptions

Image Editor is using the excellent Cropper.js. cropperOptions will be directly passed to Cropper and thus can expect the same values as documented in their README, with the addition of croppedCanvasOptions, which will be passed to getCroppedCanvas.

actions

Show action buttons (Object or boolean).

If you you’d like to hide all actions, pass false to it. By default all the actions are visible. Or enable/disable them individually:

{
revert: true,
rotate: true,
granularRotate: true,
flip: true,
zoomIn: true,
zoomOut: true,
cropSquare: true,
cropWidescreen: true,
cropWidescreenVertical: true,
}

locale: {}

export default {
strings: {
revert: 'Revert',
rotate: 'Rotate',
zoomIn: 'Zoom in',
zoomOut: 'Zoom out',
flipHorizontal: 'Flip horizontal',
aspectRatioSquare: 'Crop square',
aspectRatioLandscape: 'Crop landscape (16:9)',
aspectRatioPortrait: 'Crop portrait (9:16)',
},
};

Events

info

You can use on and once to listen to these events.

file-editor:start

Emitted when selectFile(file) is called.

uppy.on('file-editor:start', (file) => {
console.log(file);
});

file-editor:complete

Emitted after save(blob) is called.

uppy.on('file-editor:complete', (updatedFile) => {
console.log(updatedFile);
});

file-editor:cancel

Emitted when uninstall is called or when the current image editing changes are discarded.

uppy.on('file-editor:cancel', (file) => {
console.log(file);
});