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
const Uppy = require('@uppy/core')
const ThumbnailGenerator = require('@uppy/thumbnail-generator')
const uppy = Uppy()
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200
})
Installation
$ npm install @uppy/thumbnail-generator --save
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
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.
0.28.0
| Package | Version | Package | Version |
|-|-|-|-|
| uppy | 0.28.0 | @uppy/xhr-upload | 0.28.0 |
| @uppy/core | 0.28.0 | @uppy/react | 0.28.0 |
| @uppy/dashboard | 0.28.0 | @uppy/transloadit | 0.28.0 |
| @uppy/dropbox | 0.28.0 | @uppy/tus | 0.28.0 |
| @uppy/form | 0.28.0 | @uppy/url | 0.28.0 |
| @uppy/informer | 0.28.0 | @uppy/webcam | 0.28.0 |
| @uppy/utils | 0.28.0 | @uppy/url | 0.28.0 |
| @uppy/thumbnail-generator | 0.28.0 | @uppy/status-bar | 0.28.0 |
| @uppy/redux-dev-tools | 0.28.0 | @uppy/react | 0.28.0 |
| @uppy/provider-views | 0.28.0 | @uppy/progress-bar | 0.28.0 |
| @uppy/instagram | 0.28.0 | @uppy/informer | 0.28.0 |
| @uppy/google-drive | 0.28.0 | @uppy/golden-retriever | 0.28.0 |
| @uppy/form | 0.28.0 | @uppy/file-input | 0.28.0 |
| @uppy/dropbox | 0.28.0 | @uppy/drag-drop | 0.28.0 |
| @uppy/dashboard | 0.28.0 | @uppy/companion | 0.15.0 |
| @uppy/aws-s3 | 0.28.0 | @uppy/aws-s3-multipart | 0.28.0 |
- @uppy/core: bring back i18n locale packs (#1114 / @goto-bus-stop, @arturi)
- @uppy/companion: option validation (can use https://npm.im/ajv + JSON schema)
- @uppy/companion: Remove duplicate typescript dependency (#1119 / @goto-bus-stop)
- @uppy/companion: ⚠️ breaking Migrate provider adapter to Companion: saves 5KB on the frontend, all heavy lifting moved to the server side (#1093 / @ifedapoolarewaju)
- @uppy/core: single-use Uppy instance: adds an
allowMultipleUploads
option to @uppy/core. If set to false, uppy.upload() can only be called once. Afterward, no new files can be added and no new uploads can be started. This is intended to serve the <form>
-like use case. (#1064 / @goto-bus-stop) - @uppy/dashboard: Auto close after finish using
closeAfterFinish: true
(#1106 / @goto-bus-stop) - @uppy/dashboard: call
hideAllPanels
after a file is added in Dashboard, instead of toggleAddFilesPanel(false)
that didn’t hide some panels - @uppy/status-bar: ⚠️ breaking Add spinner, pause/resume as small round buttons, different color for encoding; Added separate options for hiding pause/resume and cancel button; Added more statuses to the Dashboard, like “Upload complete”, “Upload paused” and “Uploading 5 files” (#1097 / @arturi)
- @uppy/url: add end2end test for Url plugin (#1120 / @ifedapoolarewaju)
- @uppy/transloadit: add end2end test for @uppy/transloadit (#1086 / @arturi)
- @uppy/thumbnail-generator: Add thumbnail generation integration test (#970 / @goto-bus-stop)
- @uppy/thumbnail-generator: Allow to constrain thumbnail height, fixes #979 (@richartkeil / #1096)
- @uppy/thumbnail-generator: Fix JPG previews on Edge (#1092 / @goto-bus-stop)
- @uppy/aws-s3: use RequestClient, it contains the Uppy Companion specific stuff, so we don't have to think about that when working on the S3 plugin. (#1091 / @goto-bus-stop)
- @uppy/transloadit: Add
COMPANION_PATTERN
constant (#1104 / @goto-bus-stop) - @uppy/transloadit: Error tweaks (#1103 / @goto-bus-stop)
- @uppy/webcam: Fix getting data from Webcam recording if mime type includes codec metadata (#1094 / @goto-bus-stop)
- @uppy/core: remove upload-cancel event, file-removed should be enough (#1069 / @arutri)
- meta: document events, deprecate unused (#1069 / @arturi)
- meta: New demo video/gif and website frontpage code sample (#1099 / @arturi)
- meta: Update react.md (#1110 / @asmt3)
- meta: Add missing addMoreFiles string to locale (#1111 / @FWirtz)
- meta: Release script improvements: generate nicer releases and a nicer commit history. (#1122 / @goto-bus-stop)
- meta: Add release documentation. eg: test on transloadit website, check examples on the uppy.io website (@goto-bus-stop)