Skip to main content

Uppy 2.4-2.7: Image Compressor, Transloadit Rate Limiting, ESM

· 4 min read

We’re always looking for opportunities to teach Uppy cool new tricks, and the past few months have been no exception. Since our most recent post in December, Uppy has continued to receive a steady stream of updates. This post covers all the improvements made in Uppy versions 2.4 through 2.7. Changes and additions include: image compression, improved Transloadit rate limiting and a lighter Dashboard plugin. We’ve also moved our end-to-end tests to Cypress, and are slowly converting plugins to ES modules (ESM).

Uppy Compressor plugin showing compressed images notification

Compressor

Some of the most commonly uploaded files on the internet are images — photos, stock images, screenshots, and documents scans. Uppy now includes a new plugin called @uppy/compressor that optimizes images (JPEG, PNG), saving on average up to 60% in size (roughly 18 MB for 10 images). It uses Compressor.js under the hood.

Read the docs and try Compressor in action.

import Uppy from '@uppy/core';
import Compressor from '@uppy/compressor';

const uppy = new Uppy();
uppy.use(Compressor);

@uppy/compressor is also the first plugin that we are releasing as ESM, backwards compatible as CJS, to test out how this works. Please report any issues.

Hosted Companion custom credentials

It cannot be overstated that our Transloadit-hosted Companion Plugin is the easiest secure way to allow your users pick files from cloud sources like Google Drive, Instagram, Box, etc. via Uppy. Up until now, however, that meant your users had to authenticate their cloud account with Transloadit, preventing you from showing your own logo instead. That has now been fixed! Head to Transloadit Console / Credentials, scroll down to Third-party Credentials, click on Add new Credentials, select Companion OAuth, and voilà!

Transloadit Companion 3rd party credentials

Try it out with the free Transloadit Community Plan — 5GB / month and access to Companion.

Transloadit rate limiting

We’ve added rate limiting to Transloadit assembly creation and status polling, and tus retries:

When the remote server responds with HTTP 429, all requests are paused for a while in the hope that it can resolve the rate limiting. Failed requests are now also queued up after the retry delay. Before, they were scheduled for retry without being queued up, which would sometimes end up overflowing the limit option.

As a result of this change, uploading many files at once has become even more robust.

Move to ESM

The JavaScript ecosystem is moving towards ESM, and we want to follow suit. We are slowly starting to adopt ESM in Uppy packages. To do so, we integrated a plugin into our build system that transpiles ESM source code to CommonJS syntax, which is distributed with the npm package. Nothing will change on your end, though – we know that not everyone is using tooling that support ESM, so we’re holding on to CommonJS for the time being. Our plan is to refactor all official Uppy plugins to ESM before Uppy 3.0 is released, and drop CommonJS in favor of ESM in the npm packages at that point.

For details, see PR 3468.

End to end: move to Cypress

Uppy has had end to end from the start, but the developer experience was less than ideal with custom Webdriver.io + Selenium. The transition to Cypress allows us to write tests with ease and comfort, backed by great documentation.

Lighter Bundle

We continue to look for ways to reduce Uppy’s bundle size and modernize our build toolchain. This time, we’ve replaced the Exifr.js legacy bundle with the modern one without IE polyfills. Our Browserify bundler has been replaced with a modern and more efficient ESBuild.

Companion improvements

  • Improved private IP check (#3403)
  • Implement periodic ping functionality (#3246)
  • Fix broken thumbnails for Box and Dropbox (#3460)
  • Fix unpslash author meta, sanitize metadata to strings and improve Companion tests (#3478)

That’s it for today! See the full changelog for more details.