Question: Uppy + React, how to access uppy instance thru components ?

Hi Uppy teams,

I’ve initialized one Uppy Instance in my React ./App.js Component:

class App extends React.Component {
	constructor() {
		this.state.UppyInstance1 = Uppy({
        	id: 'UppyInstance1',
			…
		});
	}
	…
}

I would like to access this instance in sub/sub/children components of ./App.js and manually add files to it with the uppy.addFile() method.

Do i have to pass the Uppy Instance thru props of children Coomponents, or is there an other way to do it ? @uppy/store-redux only passes instance state, but i can’t access instance methods thru redux (for example like UppyInstance1.addFile()).

Thanks a lot for your help !

[rockyhuber]

Hi Aarbel. I just had this problem and solved it the following way.

In uppyAll file where I have all my initialised Uppy instances;

import React from "react";
import Uppy from '@uppy/core';

const uppyAll = {
uppyOne: Uppy({
        debug: true,
        id: 'uppyOne',
        autoProceed: false,
        restrictions: {
            maxFileSize: 2000000000,
            maxNumberOfFiles: 10,
            minNumberOfFiles: 1,
        }
    }),
    //... any other instances
}
export default uppyAll;

In parent appContainer. I did this so that the file upload would happen in the top most container, in the attempt to ensure the upload is not broken by navigating away from a page:

import uppyAll from '../utility/uppyAll';
...
  constructor(props) {
        this.uppyOne = uppyAll.uppyOne;
  }
...
  componentDidMount() {
        this.uppyOne.use(Tus, {
            endpoint: 'http://localhost:9000/uploads/',
            autoRetry: true,
            resume: true,
        });
  }
...
render() {
    return (
      <WhateverComponent uppyOne={this.uppyOne} />
    )
}

Then in the child WhateverComponent I could call Uppy instance like:

componentWillMount() {
        this.uppyOne = this.props.uppyOne;
}
// I could then subscribe to any Uppy events
componentDidMount(){
        this.uppyOne.on('complete', this.uploadComplete);
        this.uppyOne.on('file-added', this.fileAdded);
        this.uppyOne.on('file-removed', this.fileRemoved);
        this.uppyOne.on('upload-progress', this.uploadProgress);
...
// don't forget to unsubscribe from these

Then I can upload any file in any component across the app like this:

import { Dashboard } from '@uppy/react'
import uppyAll from '../utility/uppyAll';

render() {
    return (
      <Dashboard uppy={uppyAll.uppyOne}/>
    )
}

If anyone has any better suggestions I am all ears. I actually started to ask the same question before and then luckily got it working after a lot of trial and error. I did integrated this with Uppy Redux module as well if you need me to attach that code as well. This seemed to work for me after a great deal of time / trial and error.

Hope this helps.

[Aarbel]

I had same issue, you have to choose between DocumentsPage.contextType = ReactAppContext and create ReactAppContext with a default value, or using Providers which values are set from the state.