Package Exports

uppy-blur-up

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (uppy-blur-up) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

uppy-blur-up

Uppy plugin that generates data to create the “blur up” technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.

The relevant data is added to the file's metadata.

This plugin is not part of Uppy but inherits a lot from @uppy/thumbnail-generator. The original idea is inspired from gatsby-remark-image.

It is currently maintained by Arthur Puyou with support from Fotokorner.

Installation

$ npm install uppy-blur-up --save

Example

const Uppy = require('@uppy/core');
const BlurUp = require('uppy-blur-up');

const uppy = Uppy();
uppy.use(BlurUp);

uppy.on('blurup:generated', (file, data) => {
  console.log(`Blurup data generated for ${file.id}`, data);
});

To display the image, I recommend the react-simple-image component with the following props :

src: path to full size image
width and height: dimensions of original image from generated metadata (data.width and data.height)
applyAspectRatio: this will enforce the original aspect ratio on the thumbnail
placeholder: URL to placeholder from generated metadata (data.blur)

License

The MIT License.