Uppy is an open source project by Transloadit

Uppy 1.3: Accessibility and performance, new languages

Monday Aug 5, 2019

Hi there! We are back after a period of silence following the Uppy 1.0 release in the end of April. It was pretty well received by the commnunity and press: we hit the front pages of Hacker News, Product Hunt and Reddit. We then started trending and gained over 20,000 stargazers on GitHub, got mentioned by Smashing Magazine, JavaScript Daily and JavaScript Weekly. It’s been a crazy ride! We’d like to thank all our contributors and users for their continued support.

It was not all self reflection and celebrations, though, in Uppy Remote Headquaters™ following the 1.0 launch. After some vacation time, we quickly got back to work, releasing Uppy 1.1, 1.2 and 1.3. These updates address a lot of issues raised by the community and the team.

This post highlights the most important and exciting changes from those releases: accessibility and performance, thumbnails rotatation, new logger, progress and uploader improvements, Robodog and Companion updates, new languages and more.

Accessibility

Our new team member, Evgenia, has been on a roll and together with Artur and Alex, she has been working hard on improving accessiblity in Uppy. Evgenia has come up with something called “superfocus”, which makes sure focus stays on the most relevant button or field in the current view. The @uppy/provider-views layouts have been refactored so that checkboxes and labels are accessible. Focus styles have also been improved.

Other notable accessiblity fixes and improvements:

  • An “Add more” caption near the + button has been added to the desktop version of Uppy
  • “Copy link” & “Edit” links have been replaced with icons
  • All SVGs are now not focusable in IE11
  • Pasting works while we’re focused on buttons
  • Focus is not lost when state is updated in filter in provider-views or when editing file meta
  • Selected checkboxes now persist when moving between folders

⚠️ @uppy/provider-views translation strings have been moved from Dashboard to Core. This eliminates a dependency of provider-views upon Dashboard #1712.

See #1507, #1574 and #1656 for more details.

Dashboard performance improvements

Renée attacked performance problems in the Dashboard when adding many hundreds of files. Previously, we naively rerendered the entire file list when any file had a change. Now, only the changed file rerenders:

Before:

slow

After:

fast

See #1671 for more details. As you can see, there are still some laggy interactions — expect more improvements in future releases!

Logger

We’ve added an option to supply a logger object with debug, warn and error methods, so you can use a custom logging solution with Uppy. Check out the docs for more information.

In the future, past 2.0, the logger: Uppy.debugLogger option is going to replace debug: true. The latter will be kept for backwards compatibility for now.

⚠️ Since @uppy/[email protected], the default logger has switched to console.debug from console.log by default. You might need to change settings in your browser’s devtools to see Uppy logs!

Versions of each Uppy plugin and Core are now also logged for easier debugging.

See #1661 and #1640 for more details.

Thumbnails rotated correctly

Before this change, when you added a file to Uppy from a mobile device, you would sometimes see the preview image sideways. This was because we didn’t account for EXIF rotation metadata when generating thumbnails with @uppy/thumbnail-generator. But now, thanks to @Botz, we do! See #1532.

Progress improvements

  • The Status Bar now shows the correct total size of the upload when some files have already finished, instead of jumping down #1685.
  • Fixed an issue where progress could jump to bizarrely high values (like 1038%) while uploading files that don’t have a known size (e.g., pictures from Instagram) #1610.
  • We’ve moved from the prettier-bytes package into @uppy/utils, and divide by 1024 instead of 1000 to justify KB vs kB #1732.

Drag and drop

  • Drag and drop has been refactored internally in both the Dashboard and DragDrop plugins. This means a more robust and cross-browser implementation, with a fancy “drop files here” screen when you drag over the Dashboard.
  • The @uppy/drag-drop plugin now renders an entirely clickable DnD area.

See #1440, #1565 and #1633 for more details.

Uploaders

  • xhr-upload: we now send along global metadata when bundle: true option is set #1677.
  • xhr-upload: type and name are set from file.meta #1616.
  • aws-s3-multipart: added metadata support for S3 MultiPart #1698.
  • aws-s3: allows overriding of getResponseData() #1647.
  • aws-s3: prevents unnecessary delete multiparts request for completed files #1650.
  • aws-s3: do not extract keys from empty fields #1569.
  • tus: metaFields option has been added to the tus plugin #1644.

Localization

Thanks to our amazing contributors, Uppy now speaks: Arabic, Chinese, Dutch, English, Finnish, French, German, Hungarian, Italian, Japanese, Persian, Portuguese, Russian, Serbian, Spanish an Turkish!

New translations are rolling in every month, but there are plenty more languages out there that Uppy would love to learn. Please consider contributing your language as well!

We’ve also added docs for locales — how to use from NPM and CDN, auto-generated list of languages that are supported already and an invitation to add more #1553.

Finally, we’ve fixed an issue that could occur when adding files with names in non-Latin alphabets. When adding a file to Uppy, it gets an ID based on several characteristics, such as its size and file name. Previously, our ID generation would ignore any non-alphanumeric characters in the file name, which could cause the IDs for different files to clash. Now, those characters are worked into the ID, so that multiple similar files with different non-alphanumeric names can be added. See #1722.

Robodog

Robodog is an Uppy-based library that helps you talk to the Transloadit API. Since 1.0, most of the updates have been bugfixes:

  • Robodog.dashboard() and Robodog.form() now pass their options to the @uppy/dashboard plugin as advertised.
  • Robodog.form() now supports the triggerUploadOnSubmit option from @uppy/form.
  • Robodog.form() now supports localization of the “Choose files” button it adds in the default configuration.

Build

  • Renée split our test runs into multiple jobs on Travis CI, so unit tests, end-to-end tests and other jobs all run in parallel. This lets us identify issues with failing builds quicker and also slashes total build times by half! 🚀 #1709.
  • Webdriverio, which we use for end-to-end testing, has been updated to v5. This improves a bunch of things and adds a lot of awaits to our tests #1675.
  • Build dependencies have been upgraded: Babel to v7, Eslint to v5, Jest to v24, Typescript to v3, Postcss to v7 #1549.
  • Fixed tags for docker build #1579.
  • New uploadcdn and sync version scripts #1586 #1600.

Website and docs

  • Added Community projects — a page with Uppy plugins and integrations developed by the community #1620. Add yours!
  • Custom plugin example — now you have a reference to look at when writing your own plugin for Uppy #1623.
  • Added signature authentication to Transloadit example #1705.
  • Documented Companion’s Auth and Token mechanism #1540.
  • Updated AWS S3 Multipart documentation wrt CORS settings #1539.

Companion

Of course, we didn’t forget @uppy/companion. It’s getting more robust with every release:

  • ⚠️ We are now sending an uppy-versions header to Companion. Please see how to avoid errors if you are using Companion but NOT as standalone #1612.
  • Companion now returns mimetypes for Dropbox files #1599.
  • Added colors to logs #1648.
  • Changed oauth access token transport method #1668.
  • Companion now displays truer error during oauth failure #1702.
  • Not logging uppyAuthToken and not sending the error stack to client #1663.
  • Properly loading Instagram user name, removed deprecated dropbox field #1651 #1692.
  • Return nextPagePath for Drive/Dropbox #1652.
  • Added ability to load secret keys from files #1632.
  • Set upload filename from metadata during uploads #1587.

Misc

  • ⚠️ form: now excludes own metadata when creating a new upload. There’s also a new option to append results to the input instead of overwriting #1686.
  • core: relativePath is added to local files when a directory has been dropped/selected. It is null for non-foldered files #1602.
  • core: using uploadStarted: null instead of false #1628.
  • status-bar: hide seconds if ETA is more than 1 hour #1501.
  • react: dashboard react component prop typings updated #1598.
  • webcam: Allow definition of MediaRecorder mimeType #1708.

As always, you can find the full list of changes and package versions, as well as future plans, in our changelog.


Star