Uppy 1.3: Accessibility and performance, new languages
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:
After:
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 by1024
instead of1000
to justifyKB
vskB
#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()
andRobodog.form()
now pass their options to the@uppy/dashboard
plugin as advertised.Robodog.form()
now supports thetriggerUploadOnSubmit
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
await
s 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 isnull
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.