Uppy: Uppy with redux-saga

[anthonychung14]

Based on your docs and features, we'd love to incorporate Uppy for the following features

• Golden Retriever
• Integration with Redux
• Tus implementation
• Integration with transloadit

A similar question was asked here https://github.com/transloadit/uppy/issues/213, but I wanted to clarify (since I'm sure a lot could've changed since June).

We already have a framework via redux-saga that uses workers to handle uploads in a queue-ing format.

We'd essentially like to use Uppy as our workers (instantiate Uppy instances to handle uploads/report on progress/etc).

1. Did you mean for uppy to only be used as an end-to-end upload service (UI -> DB)? Another way to phrase it, regardless of whether you're familiar with redux-saga, do we NEED to use the UI?

Or can we pluck what we need from Uppy State to update our own UI?

[arturi]

Hi! You do not need to use Uppy UI, you can call its APIs yourself: https://uppy.io/docs/uppy/#Methods (see addFile and upload).

Rough example:

const Uppy = require('uppy/lib/core')
const GoldenRetriever = require('uppy/lib/plugins/GoldenRetriever')
const Tus = require('uppy/lib/plugins/Tus')

const uppy = Uppy({ autoProceed: false })
  .use(GoldenRetriever)
  .use(Tus, { endpoint: '://master.tus.io/files/' })
  .run()
  .on('core:success', files => console.log(`Successfully uploaded these files: ${files}`))

// you app code

onUserAction (fileBlob) {
  uppy.addFile(fileBlob)
  uppy.upload()
}

[richardwillars]

Before I came up with the proof of concept for Golden Retriever I experimented with running Uppy on a web worker, but it just doesn't work. Essentially web workers don't have access to the window or document which Uppy relies on so it'll just end up crashing. Don't waste your time trying it!

Now using Uppy in a very similar fashion to @arturi's example above in a react/redux app. All that code is in the Redux middleware, and it means we can add files to Uppy etc based on Redux actions. We're then using the Uppy Redux plugin to sync the Uppy internal state to our app's redux store, which means we can render the React components based on what Uppy is doing. Works really well.