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);
});