uppy-blur-up

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.