Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
Thumbnail Generator
@uppy/thumbnail-generator
generates proportional thumbnails (file previews) for images that are added to Uppy.
This plugin is included by default with the Dashboard plugin, and can also be useful to display image previews in a custom UI.
import ThumbnailGenerator from '@uppy/thumbnail-generator' uppy.use(ThumbnailGenerator, { thumbnailWidth: 200, // thumbnailHeight: 200 // optional, use either width or height, waitForThumbnailsBeforeUpload: false, }) |
Now, the
file.preview
property will contain a URL to the thumbnail andthumbnail:generated
event will be emitted, see below for details.
Installation
This plugin is published as the @uppy/thumbnail-generator
package.
Install from NPM:
npm install @uppy/thumbnail-generator |
In the CDN package, the plugin class is available on the Uppy
global object:
const { ThumbnailGenerator } = Uppy |
Options
The @uppy/thumbnail-generator
plugin has the following configurable options:
uppy.use(ThumbnailGenerator, { id: 'ThumbnailGenerator', thumbnailWidth: 200, thumbnailHeight: 200, thumbnailType: 'image/jpeg', waitForThumbnailsBeforeUpload: false, }) |
id: 'ThumbnailGenerator'
A unique identifier for this plugin. It defaults to 'ThumbnailGenerator'
.
locale: {}
export default { strings: { generatingThumbnails: 'Generating thumbnails...', }, } |
thumbnailWidth: 200
Width of the resulting thumbnail. Default thumbnail dimension is 200px. Thumbnails are always proportional and not cropped. If width is provided, height is calculated automatically to match ratio.
If both width and height are given, only width is taken into account.
uppy.use(ThumbnailGenerator, { thumbnailWidth: 300 }) will produce a 300px width thumbnail with calculated height to match ratio.
thumbnailHeight: null
Height of the resulting thumbnail. Default thumbnail dimension is 200px. Thumbnails are always proportional and not cropped. If height is provided, width is calculated automatically to match ratio.
If both width and height are given, only width is taken into account.
uppy.use(ThumbnailGenerator, { thumbnailHeight: 300 }) will produce a 300px height thumbnail with calculated width to match ratio.
uppy.use(ThumbnailGenerator, { thumbnailWidth: 300, thumbnailHeight: 300 }) will produce a 300px width thumbnail with calculated height to match ratio (and ignore the given height).
thumbnailType: 'image/jpeg'
MIME type of the resulting thumbnail. Default thumbnail MIME type is image/jpeg
. This is useful if you want to support transparency in your thumbnails by switching to image/png
.
waitForThumbnailsBeforeUpload: false
Whether to wait for all thumbnails to be ready before starting the upload. If set to true
, Thumbnail Generator will invoke Uppy’s internal processing stage and wait for thumbnail:all-generated
event, before proceeding to the uploading stage.
This is useful because Thumbnail Generator also adds EXIF data to images, and if we wait until it’s done processing, this data will be available on the server after the upload.
Event
thumbnail:generated
event is emitted with file
and preview
local url as arguments:
uppy.on('thumbnail:generated', (file, preview) => { const img = document.createElement('img') img.src = preview img.width = 100 document.body.appendChild(img) }) |