Uppy is an open source project by Transloadit
New: Transloadit Community Plan — get free hosted Companion & tusd, unlimited uploading, and 5GB/month encoding traffic!

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

⚠ In beta.

Screenshor of the Image Editor plugin UI in Dashboard

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')
const ImageEditor = require('@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

In the CDN package, it is available on the Uppy global object:

const ImageEditor = Uppy.ImageEditor


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

id: 'ImageEditor'

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

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, and if you’d like to fine tune the Cropper.js instance, you can pass options to it.



Emitted when selectFile(file) is called.

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


Emitted after save(blob) is called.

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