Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

Redux

Uppy supports the popular Redux state management library in two ways:

Redux Store

You can tell Uppy to use your app’s Redux store for its files and UI state. Please check out Custom Stores for more information on that. Here’s an example to give you a sense of how this works:

import Uppy from '@uppy/core'
import * as ReduxStore from '@uppy/store-redux'
import * as Redux from 'redux'

function createStore (reducers = {}) {
  const reducer = Redux.combineReducers({ ...reducers, uppy: ReduxStore.reducer })
  return Redux.createStore(reducer)
}

const store = new ReduxStore.ReduxStore({ store: createStore() })
const uppy = new Uppy({ store })

Keep in mind that Uppy state is not serializable (because we have to keep track of files with data blobs). So, if you persist your Redux state, you should exclude Uppy state from persistence.

If you’d like to persist your Uppy state — please look into @uppy/golden-retriever. It’s a plugin created specifically for saving and restoring Uppy state, including selected files and upload progress.

Redux Dev Tools

This is a ReduxDevTools plugin that syncs with the redux-devtools browser or JS extensions, and allows for basic time travel:

import Uppy from '@uppy/core'
import ReduxDevTools from '@uppy/redux-dev-tools'

const uppy = new Uppy({
  debug: true,
  meta: {
    username: 'John',
    license: 'Creative Commons',
  },
})
  .use(XHRUpload, { endpoint: 'https://example.com' })
  .use(ReduxDevTools)

After you .use(ReduxDevTools), you should be able to see Uppy’s state in Redux Dev Tools.

You will likely not need this if you are actually using Redux yourself, as well as Redux Store in Uppy like in the example above, since it will work automatically in that case.