Docs
- Getting Started
- SME Uploader
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Locale Packs
UI Elements
Sources
- Drag & Drop
- File Input
- Webcam
- Provider Plugins
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Import From URL
Destinations
File Processing
- Image Editor
- Robodog Introduction
- Robodog File Picker
- Robodog Form
- Robodog Upload
- Robodog Dashboard
- Transloadit
Miscellaneous
Contributing
Thumbnail Generator
@sme-uploader/thumbnail-generator
generates proportional thumbnails (file previews) for images that are added to SME Uploader.
This plugin is included by default with the Dashboard, so you don’t have to include it manually. But it is useful if you are not using the Dashboard and want to display image previews in your custom UI.
const ThumbnailGenerator = require('@sme-uploader/thumbnail-generator'); uploader.use(ThumbnailGenerator, { thumbnailWidth: 200, // thumbnailHeight: 200 // optional, use either width or height, waitForThumbnailsBeforeUpload: false }); |
Installation
This plugin is published as the @sme-uploader/thumbnail-generator
package.
Install from NPM:
npm install @sme-uploader/thumbnail-generator |
In the CDN package, it is available on the SmeUploader
global object:
const ThumbnailGenerator = SmeUploader.ThumbnailGenerator; |
Options
The @sme-uploader/thumbnail-generator
plugin has the following configurable options:
uploader.use(ThumbnailGenerator, { id: 'ThumbnailGenerator', thumbnailWidth: 200, thumbnailHeight: 200, waitForThumbnailsBeforeUpload: false }); |
id: 'ThumbnailGenerator'
A unique identifier for this plugin. It defaults to 'ThumbnailGenerator'
.
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.
uploader.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.
uploader.use(ThumbnailGenerator, { thumbnailHeight: 300 }) will produce a 300px height thumbnail with calculated width to match ratio.
uploader.use(ThumbnailGenerator, { thumbnailWidth: 300, thumbnailHeight: 300 }) will produce a 300px width thumbnail with calculated height to match ratio (and ignore the given height).
waitForThumbnailsBeforeUpload: false
Whether to wait for all thumbnails to be ready before starting the upload. If set to true
, Thumbnail Generator will invoke SME Uploader’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:
uploader.on('thumbnail:generated', (file, preview) => { const img = document.createElement('img'); img.src = preview; img.width = 100; document.body.appendChild(img); }) |