React examples do not work

[speedy250]

I have tried to implement Uppy in my React app by following the Uppy React docs, with no success. The DragDrop component is drawn, but after selecting a file none of the events fire. In my example code below you'll see numerous event handlers trying to output something, but as mentioned, nothing logs after selecting a file.

The app uses React 16.4.1 with Typescript 2.9. Uppy versions as follows

dependencies: {
    ...
    "@uppy/aws-s3": "^0.27.4",
    "@uppy/core": "^0.27.3",
    "@uppy/dashboard": "^0.27.5",
    "@uppy/react": "^0.27.5",
    "@uppy/tus": "^0.27.5",
    ...
}

upload.tsx:

import axios from 'axios';
import AwsS3 from '@uppy/aws-s3';
import Uppy from '@uppy/core';
import DragDrop from '@uppy/react/lib/DragDrop';

const AvatarPicker = ({ currentAvatar }) => {
  const uppy = Uppy({
    meta: { type: 'avatar' },
    restrictions: {
      maxNumberOfFiles: 1,
      maxFileSize: MAX_IMAGE_UPLOAD_FILESIZE_BYTES,
      allowedFileTypes: ['image/*'],
      minNumberOfFiles: 1,
    },
    autoProceed: true,
  })
  .use(AwsS3, {
    getUploadParameters (file) {
      console.log('file: ', file);
      return axios({
        url: `${API_ROOT_URL}/api/v1/sign/`,
        method: METHOD.GET,
        headers: {
          accept: 'application/json',
          'content-type': 'application/json'
        },
        params: {
          objectName: v4(),
        }
      }).then(response => {
        console.log('response: ', response);
      });
    }
  })
  .on('file-added', file => {
    console.log('Added file', file);
  })
  .on('upload-error', (file, error) => {
    console.log('error with file:', file.id);
    console.log('error message:', error);
  })
  .on('complete', result => {
    const url = result.successful[0].uploadURL;
    console.info('Upload complete!');
  })
  .run();
  return (
    <div>
      <img src={currentAvatar} alt="Current Avatar" />
      <DragDrop
        uppy={uppy}
        locale={{
          strings: {
            chooseFile: 'Pick a new avatar'
          }
        }}
      />
    </div>
  );
};

export default AvatarPicker;

[mbessieres]

I'm also having trouble getting plugins working in typescript. @arturi, can you share what behavior / errors you're experiencing?

[goto-bus-stop]

It's important not to create the uppy instance inside your render function, which in functional components is the entire function. If you don't mind having some global state, (it's fine for some apps), you can create it outside the function:

const uppy = Uppy()
  .use(...)

const AvatarPicker = () => {
  return (
    <DragDrop uppy={uppy} ... />
  )
}

Otherwise, you can use a class component with lifecycle methods.

class AvatarPicker extends React.Component {
  constructor(props) {
    super(props)

    this.uppy = Uppy()
      .use(...)
  }

  componentWillUnmount() {
    // important to do this when not using a global shared instance,
    // it cleans up event listeners and the like
    this.uppy.close()
  }

  render() {
    return <DragDrop uppy={this.uppy} />
  }
}

[pedrofs]

Just for the sake of documentation.

You can create Uppy inside a functional component using the useRef hook.

Check out this SO question:
https://stackoverflow.com/questions/56392794/react-hooks-how-to-write-variables-in-functional-components-that-in-class-compo

[arturi]

@pedrofs thanks! would you be able to send a PR for https://uppy.io/docs/react/dashboard/#Initializing-Uppy with a short example and a link to SO?