Uppy 0.22: Preact, Form, Improved Dashboard, Custom Stores

Dec 23, 2017

Uppy is featured on Product Hunt! To our fellow hunters: welcome! Quick intro: Uppy is the next open source file uploader for web browsers. We’re very close to launching 1.0 and would love to get your feedback in, leave your thoughts on Product Hunt or start a discussion below.

Hi all! It’s New Year and Christmas time, and this year Santa is brining you Uppy 0.22 🎁 This release packs a lot of neat stuff, but it also breaks things in quite a few places, so please read on.

And, if you are celebrating, happy holidays from the Uppy Team! 🎄

Preact and JSX

We’ve been happy using yo-yo and hyperx template strings in our views for quite a while, but decided to try something more stable. Preact has most of the great ideas of React, plus smaller file size as well as a few good ideas of its own.

All views have been refactored to utilize JSX. We actually liked hyperx a lot, but JSX has better tooling and syntax highlighting support. It also seems to be the standard in the React community.

See #451 PR for details on why we switched and discussion around the process.

Core and plugins refactor

  • ⚠️ Breaking We’ve renamed the core object to uppy in plugins. So instead of this.core.state we now use this.uppy.state.
  • ⚠️ Breaking Events have been renamed to remove the core: prefix. So core:success becomes just success, and this also results in now having error, upload-started and so on. Prefixed event names are used for plugin-specific event sometimes, like dashboard:file-card.
  • ⚠️ Breaking CSS class names have been altered to use the uppy- namespace, so .UppyDashboard-files becomes .uppy-Dashboard-files and so on.
  • ⚠️ Breaking getMetaFromForm was removed in favor of the new Form plugin (see below).
  • ⚠️ Breaking MetaData plugin was removed in favor of the metaFields option in Dashboard, see docs for more details.
  • Plugins now use this.el to refer to their UI element instead of this.target.
  • setPluginState and getPluginState are now used in Providers.

Refreshed Dashboard UI

Uppy Dashboard UI with 3 files selected

  • File cards are simpler, we’ve removed the excess white backgrounds, improved the remove icon, reduced paddings, added slight shadows.
  • Cicular upload button in the Dashboard has been moved to the StatusBar. It’s also not circular anymore, and there’s no cloud icon. Plain and simple.
  • Redesigned “retry” and “add +1 file” buttons.
  • Added metaFields option: an array of settings for UI field objects, which previousely lived in a separate MetaData plugin: { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }, see docs for more details.

See #434 PR for more screenshots and details.

Select multiple files in providers

Thanks to @sadovnychyi, you can now select multiple files from remote providers like Google Drive and Instagram. You can also select folders, and even range of files by holding shift key when clicking on first and last item in range.

Uppy Dashboard UI with 3 files selected

Check it out →

Stores

As you know, internally Uppy uses its own simple state management system with getState and setState methods. In previous releases we’ve added support for Redux via a plugin called Redux, which mirrors all Uppy state to your Redux application’s state, and a plugin called ReduxDevTools that connects to Redux DevTools and enables all the cool time traveling stuff.

We are excited to tell you that this release makes state management even more flexible by bringing support for external stores! Here’s a quote from the docs:

By default, Uppy stores its internal state in an object.

If your app uses a state management library such as Redux, it can be useful to have Uppy store its state there instead—that way, you could write custom uploader UI components in the same way as the other components in the application.

Here’s how that works:

const { createStore } = require('redux')
const ReduxStore = require('uppy/lib/store/ReduxStore')

const reducer = combineReducers({
...reducers,
uppy: ReduxStore.reducer
})
const store = createStore(reducer)

const uppy = Uppy({
store: ReduxStore({
store: store // That's a lot of stores!
})
})
...

Now Uppy will use your app’s Redux store instead of its own, so you have a “single source of truth” 🔮

Read more on stores in docs.

Form

Form is a new plugin that can be used in conjunction with any other. Here’s what it does:

  1. Acquires metadata from a <form> element of your choosing before the upload starts in Uppy.
  2. Injects result array of succesful and failed files back into the form.

⚠️ Breaking With this plugin we’ve deprecated getMetaFromForm option that used to be in all acquire plugins like Dashboard and DragDrop. Now you can just use Form.

uppy.use(Form, {
target: '#my-form'
})

Read more about the Form plugin in docs.

Encoding support in Golden Retriever

Our browser crash / page refresh restore plugin Golden Retriever (read more about it) now supports correctly restoring Transloadit assemblies!

Also, we’ve fixed restoring from paused state. Now uploads will remain paused and not get out of sync.

Type-safe Server

Uppy Server now uses TypeScript to do some type checking at compile time. This helps spot some otherwise easy to miss runtime bugs. While the project’s source is still written in JavaScript, the use of JSDoc specifications is leveraged by TypeScript to detect data types and mistakes with that, within the project.

Thanks to this approach a number of hidden bugs have already been identified and fixed, and it also makes Uppy Server very well documented. :)

And there’s more

  • New setFileState method as a nice shorthand to update file-specific state.
  • Added more extensions for mimetype detection.
  • More plugin documentation 👍
  • Misc bugs fixes and improvements in Webcam, Dashboard, Provider, so things should be more stable all around.
  • Added an option to limit simultaneous uploads in XHRUpload.
  • Fixed remote server error handler for uppy-server.
  • Added Snyk to uppy-server to aid vulnerability detection.

Full Changelog

» show

We expect our 1.0 release early next year. Want to impact it? Comment below, in GitHub issues, or on Product Hunt.

Happy Holidays,

The Uppy Team