What is @uppy/thumbnail-generator?
@uppy/thumbnail-generator is a plugin for the Uppy file uploader that generates image thumbnails for preview purposes. It is particularly useful for providing users with a visual representation of the images they are uploading.
What are @uppy/thumbnail-generator's main functionalities?
Generate Thumbnails
This feature allows you to generate thumbnails for images that are being uploaded. The `thumbnailWidth` option specifies the width of the generated thumbnail. The `thumbnail:generated` event is triggered when a thumbnail is successfully created, providing the file and preview URL.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});
Custom Thumbnail Dimensions
This feature allows you to specify custom dimensions for the generated thumbnails. By setting both `thumbnailWidth` and `thumbnailHeight`, you can control the size of the thumbnails more precisely.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 300,
thumbnailHeight: 300,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});
Thumbnail Quality
This feature allows you to set the quality of the generated thumbnails. The `quality` option accepts a value between 0 and 1, where 1 is the highest quality.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
quality: 0.8,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});
Other packages similar to @uppy/thumbnail-generator
sharp
Sharp is a high-performance image processing library that can resize, crop, and convert images in various formats. Unlike @uppy/thumbnail-generator, which is specifically designed for generating thumbnails within the Uppy ecosystem, Sharp is a more general-purpose library that can be used in a variety of image processing tasks.
jimp
Jimp is an image processing library for Node.js that supports image resizing, cropping, and various other manipulations. Similar to Sharp, Jimp is a general-purpose library and not specifically tied to any file uploader like Uppy. It offers a wide range of image processing functionalities.
gm
GraphicsMagick (gm) is a Node.js wrapper for the GraphicsMagick and ImageMagick image processing libraries. It provides extensive image manipulation capabilities, including resizing and thumbnail generation. Unlike @uppy/thumbnail-generator, gm is not specifically designed for integration with file uploaders but offers a broader range of image processing features.
@uppy/thumbnail-generator
Uppy plugin that generates small previews of images to show on your upload UI.
Uppy is being developed by the folks at Transloadit,
a versatile file encoding service.
Example
import Uppy from '@uppy/core'
import ThumbnailGenerator from '@uppy/thumbnail-generator'
const uppy = new Uppy()
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
})
Installation
$ npm install @uppy/thumbnail-generator
Alternatively, you can also use this plugin in a pre-built bundle from
Transloadit’s CDN: Edgly. In that case Uppy
will attach itself to the global
window.Uppy
object. See the
main Uppy documentation for instructions.
License
The MIT License.
4.0.0-beta.4
Released: 2024-04-29
| Package | Version | Package | Version |
| ---------------------- | ------------ | ---------------------- | ------------ |
| @uppy/angular | 0.7.0-beta.4 | @uppy/instagram | 4.0.0-beta.4 |
| @uppy/audio | 2.0.0-beta.4 | @uppy/onedrive | 4.0.0-beta.4 |
| @uppy/aws-s3-multipart | 4.0.0-beta.4 | @uppy/provider-views | 4.0.0-beta.4 |
| @uppy/box | 3.0.0-beta.4 | @uppy/react | 4.0.0-beta.4 |
| @uppy/companion | 5.0.0-beta.4 | @uppy/status-bar | 4.0.0-beta.4 |
| @uppy/companion-client | 4.0.0-beta.4 | @uppy/store-redux | 4.0.0-beta.2 |
| @uppy/compressor | 2.0.0-beta.4 | @uppy/svelte | 4.0.0-beta.2 |
| @uppy/core | 4.0.0-beta.4 | @uppy/transloadit | 4.0.0-beta.4 |
| @uppy/dashboard | 4.0.0-beta.4 | @uppy/unsplash | 4.0.0-beta.4 |
| @uppy/drop-target | 3.0.0-beta.4 | @uppy/url | 4.0.0-beta.4 |
| @uppy/dropbox | 4.0.0-beta.4 | @uppy/utils | 6.0.0-beta.4 |
| @uppy/facebook | 4.0.0-beta.4 | @uppy/webcam | 4.0.0-beta.4 |
| @uppy/file-input | 4.0.0-beta.4 | @uppy/xhr-upload | 4.0.0-beta.2 |
| @uppy/form | 4.0.0-beta.2 | @uppy/zoom | 3.0.0-beta.4 |
| @uppy/google-drive | 4.0.0-beta.4 | uppy | 4.0.0-beta.4 |
| @uppy/image-editor | 3.0.0-beta.2 | | |
- meta: Upgrade Yarn to 4.x (Merlijn Vos / #4849)
- @uppy/utils: fix fetcher export (Murderlon)
- @uppy/xhr-upload: refactor to use
fetcher
(Merlijn Vos / #5074) - docs: use StackBlitz for all examples/issue template (Merlijn Vos / #5125)
- meta: Update yarn.lock (Murderlon)
- @uppy/svelte: Add svelte 5 as peer dep (frederikhors / #5122)
- meta: Bump docker/setup-buildx-action from 2 to 3 (dependabot[bot] / #5124)
- meta: Bump actions/checkout from 3 to 4 (dependabot[bot] / #5123)
- @uppy/dashboard,@uppy/provider-views: Remove JSX global type everywhere (Merlijn Vos / #5117)
- @uppy/utils: improve return type of
dataURItoFile
(Antoine du Hamel / #5112) - @uppy/drop-target: change drop event type to DragEvent (Alireza Heydari / #5107)
- @uppy/image-editor: fix label definitions (Antoine du Hamel / #5111)
- meta: bump Prettier version (Antoine du Hamel / #5114)
- @uppy/provider-views: bring back "loaded X files..." (Mikael Finstad / #5097)
- @uppy/dashboard: fix type of trigger option (Merlijn Vos / #5106)
- meta: fix linter (Antoine du Hamel)
- @uppy/companion: bump Node.js version support matrix (Antoine du Hamel / #5035)
- @uppy/form: fix
submitOnSuccess
and triggerUploadOnSubmit
combination (Merlijn Vos / #5058) - meta: Bump docker/build-push-action from 3 to 5 (dependabot[bot] / #5105)
- meta: Bump akhileshns/heroku-deploy from 3.12.12 to 3.13.15 (dependabot[bot] / #5102)
- meta: Bump docker/login-action from 2 to 3 (dependabot[bot] / #5101)
- meta: Bump actions/download-artifact from 3 to 4 (dependabot[bot])
- meta: Bump actions/upload-artifact from 3 to 4 (dependabot[bot])
- @uppy/react: remove
useUppy
& reintroduce useUppyState
(Merlijn Vos / #5059) - meta: docs: add back markdown files (Antoine du Hamel / #5064)
- meta: fix custom provider example (Merlijn Vos / #5079)
- @uppy/utils: add fetcher (Merlijn Vos / #5073)
- meta: Fix prettier (Murderlon)
- @uppy/dashboard: add missing
x-zip-compress
archive type (Younes / #5081) - meta: Bump docker/metadata-action from 4 to 5 (dependabot[bot] / #5086)
- meta: Bump actions/setup-node from 3 to 4 (dependabot[bot] / #5087)
- meta: Bump docker/setup-qemu-action from 2 to 3 (dependabot[bot] / #5089)
- meta: bump supercharge/redis-github-action from 1.4.0 to 1.8.0 (dependabot[bot] / #5090)
- meta: bump actions/cache from 3 to 4 (dependabot[bot] / #5088)
- meta: add
dependabot.yml
to keep GHA up-to-date (Antoine du Hamel / #5083) - @uppy/core: Release: uppy@3.24.2 (github-actions[bot] / #5084)
- @uppy/core: fix
setOptions
not re-rendereing plugin UI (Antoine du Hamel / #5082) - meta: bump vite from 5.0.12 to 5.0.13 (dependabot[bot] / #5060)
- meta: bump tar from 6.1.11 to 6.2.1 (dependabot[bot] / #5068)
- @uppy/companion,@uppy/file-input: Release: uppy@3.24.1 (github-actions[bot] / #5069)
- @uppy/companion: upgrade redis (Mikael Finstad / #5065)
- meta: fix
watch:*
scripts (Antoine du Hamel / #5046) - meta: include more packages in
compare_diff
CI (Antoine du Hamel / #5044) - @uppy/file-input: add missing export (Antoine du Hamel / #5045)
- meta: Bump express from 4.18.1 to 4.19.2 in /packages/@uppy/companion (dependabot[bot] / #5036)
- @uppy/companion: Bump express from 4.18.1 to 4.19.2 (dependabot[bot] / #5037)