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 = new Uppy()
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200
})
Installation
$ npm install @uppy/thumbnail-generator
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.
1.7.0
Released: 2019-12-16
This release adds Hebrew translations and smoothes out some rough edges in Companion. The Webcam plugin now supports showing the duration of recordings while in progress.
| Package | Version | Package | Version |
|-|-|-|-|
| @uppy/aws-s3-multipart | 1.3.5 | @uppy/onedrive | 0.1.3 |
| @uppy/aws-s3 | 1.4.0 | @uppy/progress-bar | 1.3.3 |
| @uppy/companion | 1.7.0 | @uppy/provider-views | 1.5.1 |
| @uppy/core | 1.7.0 | @uppy/react | 1.4.1 |
| @uppy/dashboard | 1.5.1 | @uppy/robodog | 1.4.1 |
| @uppy/drag-drop | 1.4.1 | @uppy/status-bar | 1.4.1 |
| @uppy/dropbox | 1.3.4 | @uppy/thumbnail-generator | 1.5.1 |
| @uppy/facebook | 0.2.1 | @uppy/transloadit | 1.4.1 |
| @uppy/file-input | 1.4.1 | @uppy/tus | 1.5.1 |
| @uppy/form | 1.3.4 | @uppy/url | 1.4.1 |
| @uppy/golden-retriever | 1.3.3 | @uppy/utils | 2.1.1 |
| @uppy/google-drive | 1.3.4 | @uppy/webcam | 1.5.0 |
| @uppy/informer | 1.3.3 | @uppy/xhr-upload | 1.4.1 |
| @uppy/instagram | 1.3.4 | uppy | 1.7.0 |
| @uppy/locales | 1.10.0 | - | - |
- @uppy/aws-s3: add some tests (@bambii7, #1934)
- @uppy/companion: add onedrive domain validation for the demo deployment (@ifedapoolarewaju, #1959)
- @uppy/companion: change demo deployment type to stable API (@kiloreux, #1938)
- @uppy/companion: log error if exists during token verification (@ifedapoolarewaju, #1937)
- @uppy/companion: mask auth tokens from logged referrer URLs (@ifedapoolarewaju, #1951)
- @uppy/companion: only generate
uppyToken
if access_token
was received from provider (@ifedapoolarewaju, #1946) - @uppy/companion: pass metadata to Companion
getKey()
option for S3 uploads (@goto-bus-stop, #1866) - @uppy/companion: rename uppy occurrences to companion (@ifedapoolarewaju, #1926)
- @uppy/companion: run CI tests on Node 6 to ensure compatibility (@ifedapoolarewaju, #1953)
- @uppy/companion: upgrade
helmet
(@goto-bus-stop, 6b006ac) - @uppy/companion: use original file name in S3 Multipart uploads (@goto-bus-stop, #1965)
- @uppy/core: make
uppy.on()
work better with IntelliSense (@bambii7, #1923) - @uppy/dashboard: hide top bar cancel button when
hideCancelButton: true
(@goto-bus-stop, #1955) - @uppy/dashboard: move dropEffect assignment to dragover (@goto-bus-stop, #1982)
- @uppy/drag-drop: move dropEffect assignment to dragover (@goto-bus-stop, #1982)
- @uppy/locales: add Hebrew (@YehudaKremer, #1932)
- @uppy/locales: rename
es_GL
→ gl_ES
(@goto-bus-stop, #1929) - @uppy/thumbnail-generator: add webp to the list of supported types (@arturi, #1961)
- @uppy/thumbnail-generator: vendor exif-js source in Uppy (@mskelton, #1940)
- @uppy/webcam: add
showRecordingLength: true
option (@dominiceden, #1947) - docs: FB and OneDrive are not yet in the CDN bundle (@goto-bus-stop, 61b54b9)
- docs: add
companionHeaders
to s3-multipart docs (@goto-bus-stop, a6e44a9) - docs: add reset-progress event to docs (@bambii7, #1922)
- docs: make Robodog naming more consistent (@goto-bus-stop, #1935)
- docs: make react sample code more standalone (@uxitten, #1864)
- examples: remove
UPPYSERVER_
references (@goto-bus-stop, e74690e) - website: add facebook to dashboard example (@ifedapoolarewaju, #1930)
- website: add plugin versions (@arturi, #1952)
- website: enable onedrive on the website example (@ifedapoolarewaju, #1975)