Uppy 0.10: Getting together, the future, Google Drive UI, exposed events
Hi! Another month has passed and we have just released a new version of Uppy. Here’s what we’ve been up to.
Thinking about the future 🔮​
We have been spending quite a lot of time thinking about Uppy's future and the direction in which we would like to take this project. Our primary concern is making Uppy as flexible as possible as well as compatible with popular libraries, such as React and React Native. We also want to make it easy to port Uppy to any environments or ecosystems that are not officially supported.
We have done a lot of research. We created
prototypes of Uppy React components and
we also created a new module that we like to call "Uppy Base."
uppy-base
is a thin module containing
reusable functionality from some of our plugins that can be used in any
ecosystem or environment, without being opinionated about the UI.
Finally, we are also discussing using Redux
as the internal state management store within Uppy. You can see some drafts
under the src/experimental
folder (EDIT: this folder has since been removed).
Have a look at the Uppy Base repository here.
Check out our Uppy React wrapper and components, which are built on top of Uppy Base.
Finally, we have played a bit with CSS Modules and CSJS. We have also tried generating preview thumbnails in Web Workers, as well as with Pica library.
We would love to hear feedback on all of this. Please join our discussion at: https://github.com/transloadit/uppy/issues/116
You are, of course, more than welcome to chime in on other issues or to open new ones!
Dashboard: refreshed look and new features​
In an attempt to be brave and keep things simple, we have removed the dashed border from inside the Dashboard, rewritten its layout with flexbox, and tried out a new blend-in-with-the-background-and-blur mode.
Uppy now also has the option to render the Dashboard inline on the page, instead
of the default full modal dialog. To try it out, set inline: true
in options,
like this: uppy.use(Dashboard, {target: '.myContainer', inline: true})
.
We have also added a circular progress bar that shows total upload progress, combined with a pause all / resume all button, and an info panel that shows speed, ETA and status for all uploads currently in progress. So you'll have something fun and useful to look at while you are waiting!
Be sure not to miss out on the new Copy Link button that appears after a successful upload, right where the edit button usually is. We know, that’s pretty exciting! And it gets even better: when you click on it, the link is copied to your clipboard. Or, in less capable browsers, a window pops up with a text link, so you can copy it yourself. Bananas!
Google Drive UI improved​
The UI for Google Drive has received a fresh new redesign. Check it out!
Listen to events​
We have finally begun to expose events on the uppy
instance, so you can now
subscribe to them and use them in your app. For example, in order to display an
image in your UI after it has been successfully uploaded:
uppy.on('core:upload-success', (id, url) => {
const img = new Image();
img.width = 300;
img.alt = id;
img.src = url;
document.body.appendChild(img);
});
There is also core:upload-progress
to track progress and core:success
for
when all uploads are complete. The
event documentation is quite small
right now, we’ll be adding more once we sort out the API.
But wait, there’s more!​
- i18n strings now extend default en_US dictionary: if a certain string is not available in a language, the English string will be displayed.
- Updated readme: improved usage docs and CDN links. Check out the new usage section for yourself. Import, require or script tag? In any case, we’ve got your back.
- Capabilities: we have added
capabilities
to the state. For example, if 'tus' resumable uploader is used,capabilities.resumable === true
is added to the state, so it is easy to check what upload capabilities are available. More to come.
Release Notes​
Here is the full list of changes for version 0.10.0:
- core: expose some events/APIs/callbacks to the user:
onFileUploaded
,onFileSelected
,onAllUploaded
,addFile
(orparseFile
), open modal... (@arturi, @hedgerh) - core: how would Uppy work without the UI, if one wants to Uppy to just add files and upload, while rendering preview and UI by themselves #116 — discussion Part 1 (@arturi, @hedgerh)
- core: refactor towards react compatibility as discussed in https://github.com/transloadit/uppy/issues/110 (@hedgerh)
- core: CSS modules? allow bundling of CSS in JS for simple use in NPM? See https://github.com/transloadit/uppy/issues/120#issuecomment-242455042, try https://github.com/rtsao/csjs — verdict: not yet, try again later (@arturi, @hedgerh)
- core: try Web Workers and FileReaderSync for image resizing again — still slow, probably message payload between webworker and regular thread is huge (@arturi)
- core: i18n strings should extend default
en_US
dictionary — if a certain string in not available in German, English should be displayed (@arturi) - dashboard: refactor to smaller components, pass props down (@arturi)
- dashboard: option to render Dashboard inline instead of a modal dialog (@arturi)
- dashboard: global circular progress bar, try out different designs for total upload speed and ETA (@arturi)
- dashboard: show total upload speed and ETA, for all files (@arturi)
- dashboard: copy link to uploaded file button, cross-browser (@arturi) (http://i.imgur.com/b1Io34n.png) (@arturi)
- dashobard: refreshed design and grand refactor (@arturi)
- dashboard: improve file paste the best we can http://stackoverflow.com/a/22940020 (@arturi)
- provider: abstract google drive into provider plugin for reuse (@hedgerh)
- google drive: improve UI (@hedgerh)
- tus: add
resumable
capability flag (@arturi) - tus: start fixing pause/resume issues and race conditions (@arturi)
- test: working Uppy example on Require Bin — latest version straight from NPM http://requirebin.com/?gist=54e076cccc929cc567cb0aba38815105 (@arturi @account)
- meta: update readme docs, add unpkg CDN links (https://unpkg.com/uppy/dist/uppy.min.css) (@arturi)
- meta: write 0.10 release blog post (@arturi)
We’ll see you in about a month!
The Uppy Team