Recent Posts
- Uppy 2.4-2.7: Image Compressor, Transloadit Rate Limiting, ESM
- 🎄 Uppy 2.1-2.3: Audio plugin, fast and efficient streaming for Companion, production-ready Unsplash, and more
- Uppy 2.0.0: smaller, faster, modular plugins, Preact X, stricter types, and much more
- Uppy 1.30: Angular integration, granular image rotation, Google Drive shortcuts
- Uppy 1.29: Golden Retriever, disableLocalFiles, Webcam previews, uppy.logout
- Uppy 1.27: Drop Target plugin, Vue 3 support, Dashboard dynamic meta fields, “Shared with me” in Google Drive
- Uppy 1.26: Dashboard “disabled”, per-file headers
- Uppy 1.25: right-to-left scripts, Ukrainian translation, Companion improvements
- Uppy 1.24: 🎅 Happy Holidays — Svelte, React hook, Auto Open Image Editor
- Uppy 1.23: Vue.js, Box, Done button and cloud file restrictions
- 🎃 Uppy 1.22: Webcam camera source, Unsplash and maxTotalFileSize
Image Editor 🌈
One of the most-requested Uppy features, the Image Editor, has landed (as beta) in 1.18.
The editor currently supports cropping, resizing, rotating, flipping and zooming your images in and out. You can try it out on the Dashboard example page.
Under the hood we are using the excellent open source (just like Uppy itself) Cropper.js library.
npm install @uppy/image-editor |
const Uppy = require('@uppy/core') const Dashboard = require('@uppy/dashboard') const ImageEditor = require('@uppy/image-editor') const uppy = new Uppy() uppy.use(Dashboard) uppy.use(ImageEditor, { target: Dashboard, quality: 0.8, // for the resulting image, 0.8 is a sensible default }) |
The Image Editor plugin is meant to be used with the Dashboard UI, but in theory it can work without it, rendered somewhere else. This has not been tested, try at your own risk ;-)
You can override the options from Cropper.js, too. Check out the docs for up to date options and events.
Please leave your feedback on Twitter.
🖼 One of the most-requested Uppy features, the Image Editor, for cropping, resizing, rotating, flipping and zooming your images is live now!
— Uppy (@uppy_io) July 21, 2020
Check it out: https://t.co/dDXRoW0HGj pic.twitter.com/IhYo0gwtvP
Star