@uppy/thumbnail-generator

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.

README

@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: Smart CDN. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.

Documentation

Documentation for this plugin can be found on the Uppy website.

License

The MIT License.

Changelog

4.1.1

Released: 2024-08-15

| Package | Version | Package | Version | | ---------------------- | ------- | ---------------------- | ------- | | @uppy/aws-s3 | 4.0.3 | @uppy/provider-views | 4.0.1 | | @uppy/companion | 5.0.5 | @uppy/status-bar | 4.0.2 | | @uppy/companion-client | 4.0.1 | @uppy/transloadit | 4.0.2 | | @uppy/core | 4.1.1 | @uppy/tus | 4.0.1 | | @uppy/dashboard | 4.0.3 | @uppy/utils | 6.0.2 | | @uppy/drag-drop | 4.0.2 | @uppy/vue | 2.0.1 | | @uppy/file-input | 4.0.1 | uppy | 4.1.1 | | @uppy/image-editor | 3.0.1 | | |

• @uppy/transloadit: fix issue with allowMultipleUploadBatches (Mikael Finstad / #5400)
• meta: Bump elliptic from 6.5.5 to 6.5.7 (dependabot[bot] / #5410)
• meta: add back patch for p-queue (Antoine du Hamel / #5409)
• @uppy/transloadit: fix many lurking TypeError (Mikael Finstad / #5399)
• docs: improve corsOrigins documentation (Mikael Finstad / #5390)
• docs: add ViewEncapsulation to Angular example (Aaron Russell / #5395)
• @uppy/companion: fix code for custom providers (Mikael Finstad / #5398)
• docs: add note about throwing in cancelAll and destroy() (Mikael Finstad / #5408)
• meta: Bump docker/login-action from 3.2.0 to 3.3.0 (dependabot[bot] / #5372)
• meta: Bump docker/setup-qemu-action from 3.1.0 to 3.2.0 (dependabot[bot] / #5370)
• docs: make hosted Companion more clear (Merlijn Vos / #5394)
• meta: Bump docker/build-push-action from 6.4.1 to 6.6.1 (dependabot[bot] / #5403)
• meta: bump p-queue to latest, remove patch (Mikael Finstad / #5391)
• meta: enforce .ts extension for relative import types (Antoine du Hamel / #5393)
• @uppy/tus: Fix onShouldRetry type signature (Trent Nadeau / #5387)
• @uppy/dashboard,@uppy/drag-drop,@uppy/file-input: Transform the accept prop into a string everywhere (Evgenia Karunus / #5380)
• docs: fix getTemporarySecurityCredentials in aws-s3 (Merlijn Vos / #5363)