Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

Image Editor

@uppy/image-editor allows users to crop, rotate, zoom and flip images that are added to Uppy.

Designed to be used with the Dashboard UI (can in theory work without it).

Screenshor of the Image Editor plugin UI in Dashboard

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

const uppy = new Uppy()
uppy.use(ImageEditor, {
  target: Dashboard,
  quality: 0.8,


This plugin is published as the @uppy/image-editor package.

Install from NPM:

npm install @uppy/image-editor

The @uppy/image-editor plugin is in beta and is not yet available in the CDN package.


The @Uppy/image-editor plugin requires the following CSS for styling:

import '@uppy/image-editor/dist/style.css'

A minified version is also available as style.min.css at the same path. Include this import after your import of the core stylesheet and the dashboard stylesheet.


The @uppy/image-editor plugin has the following configurable options:

uppy.use(ImageEditor, {
  id: 'ImageEditor',
  quality: 0.8,
  cropperOptions: {
    viewMode: 1,
    background: false,
    autoCropArea: 1,
    responsive: true,
    croppedCanvasOptions: {},
  actions: {
    revert: true,
    rotate: true,
    granularRotate: true,
    flip: true,
    zoomIn: true,
    zoomOut: true,
    cropSquare: true,
    cropWidescreen: true,
    cropWidescreenVertical: true,

id: 'ImageEditor'

A unique identifier for this plugin. It defaults to 'ImageEditor'.

quality: 0.8

Quality of the resulting blob that will be saved in Uppy after editing/cropping.


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.


Image Editor actions buttons, which will be shown. If you you’d like to hide any action pass false to it. By default all the actions are visible.



Emitted when selectFile(file) is called.

uppy.on('file-editor:start', (file) => {


Emitted after save(blob) is called.

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


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

uppy.on('file-editor:cancel', (file) => {

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)',