@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

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.

Changelog

1.6.0

Released: 2019-11-04

This release adds Icelandic translations and a long-awaited setOptions API to change configuration (including language) at runtime.

| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 1.3.4 | @uppy/onedrive | 0.1.2 | | @uppy/aws-s3 | 1.3.3 | @uppy/progress-bar | 1.3.2 | | @uppy/companion | 1.6.0 | @uppy/provider-views | 1.5.0 | | @uppy/core | 1.6.0 | @uppy/react | 1.4.0 | | @uppy/dashboard | 1.5.0 | @uppy/robodog | 1.4.0 | | @uppy/drag-drop | 1.4.0 | @uppy/status-bar | 1.4.0 | | @uppy/dropbox | 1.3.3 | @uppy/thumbnail-generator | 1.5.0 | | @uppy/facebook | 0.2.0 | @uppy/transloadit | 1.4.0 | | @uppy/file-input | 1.4.0 | @uppy/tus | 1.5.0 | | @uppy/form | 1.3.3 | @uppy/url | 1.4.0 | | @uppy/golden-retriever | 1.3.2 | @uppy/utils | 2.1.0 | | @uppy/google-drive | 1.3.3 | @uppy/webcam | 1.4.0 | | @uppy/informer | 1.3.2 | @uppy/xhr-upload | 1.4.0 | | @uppy/instagram | 1.3.3 | uppy | 1.6.0 | | @uppy/locales | 1.9.0 | - | - |

• @uppy/companion: Add S3 useAccelerateEndpoint option (@steverob, #1884)
• @uppy/companion: only set Access-Control-Allow-Credentials header when origin is whitelisted (@ifedapoolarewaju, #1901)
• @uppy/companion: set a more visible thumbnail size for dropbox (@ifedapoolarewaju, #1917)
• @uppy/companion: upgrade connect-redis (@ifedapoolarewaju, #1911)
• @uppy/core: Allow passing meta type to upload-success and complete events (@MatthiasKunnen, #1879)
• @uppy/core: add UppyFile.response typing (@superhawk610, #1882)
• @uppy/core: add setOptions API (@arturi, #1728)
• @uppy/core: skip upload-success event for a file that has been removed (@julianocomg, #1875)
• @uppy/facebook: use grid view with big image previews for album folders (@ifedapoolarewaju, #1886)
• @uppy/locales: Added Icelandic :iceland: (@olitomas, #1916)
• @uppy/provider-views: Fix sizes for smaller images in grid layout (@arturi, #1897)
• @uppy/provider-views: provider views breadcrumbs is failed to render (@huydod, #1914)
• @uppy/transloadit: send Transloadit-Client header with HTTP API requests (@goto-bus-stop, #1919)
• @uppy/tus: terminate tus upload when cancelling instead of just pausing and letting it expire (@ifedapoolarewaju, #1909)
• @uppy/utils: accept sync functions in wrapPromiseFunction() (@goto-bus-stop, #1910)
• docs: README.md wording and formatting changes (@sercraig, #1900)
• docs: clarify that 'upload-success' and 'upload-error' response parameter is specific to some uploaders (@bambii7, #1921)
• docs: add OneDrive to Companion documentation (@ifedapoolarewaju, #1925)
• examples: support COMPANION_AWS_ENDPOINT in aws-companion example so it can be used with other S3-compatible services (@goto-bus-stop, 1ab63aa)
• website: improve support page design (@arturi, #1913)