@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.0

Released: 2024-07-30

| Package | Version | Package | Version | | -------------------- | ------- | -------------------- | ------- | | @uppy/audio | 2.0.1 | @uppy/status-bar | 4.0.1 | | @uppy/aws-s3 | 4.0.2 | @uppy/store-default | 4.1.0 | | @uppy/compressor | 2.0.1 | @uppy/transloadit | 4.0.1 | | @uppy/core | 4.1.0 | @uppy/utils | 6.0.1 | | @uppy/dashboard | 4.0.2 | @uppy/webcam | 4.0.1 | | @uppy/remote-sources | 2.1.0 | uppy | 4.1.0 |

• @uppy/remote-sources: fix options type (Merlijn Vos / #5364)
• @uppy/transloadit: do not mark opts as mandatory (Antoine du Hamel / #5375)
• @uppy/compressor: mark quality as optional (Antoine du Hamel / #5374)
• @uppy/aws-s3: improve error when endpoint is not provided (Antoine du Hamel / #5361)
• @uppy/core,@uppy/store-default: export Store type (Merlijn Vos / #5373)
• @uppy/dashboard: make toggleAddFilesPanel args consistent (Evgenia Karunus / #5365)
• @uppy/dashboard: Dashboard - convert some files to typescript (Evgenia Karunus / #5359)
• @uppy/audio,@uppy/webcam: Don't use <h1> in Uppy markup (Evgenia Karunus / #5355)
• @uppy/status-bar: GoldenRetriever + hideUploadButton=true (Evgenia Karunus / #5350)
• meta: Bump docker/build-push-action from 6.3.0 to 6.4.1 (dependabot[bot] / #5360)