Setting up Uppy file uploader on reactjs

Setting Uppy with Reactjs, AWS S3 and node backend.

TL;DR go to the github repo and follow instructions.
https://github.com/rajaraghav/uppyReactNode

Setting Uppy with react with custom plugins is a little hard to achieve, but thanks to their documentation and Github support, I was able to integrate Uppy with my react frontend and nodejs backend. If you’re looking for just uppy and react setup go here https://uppy.io/docs/react/.

First things first, What is Uppy?

Uppy, according to their website is a js based open-source, modular file uploader that works with any framework. It fetches files from local disk, Google Drive, Dropbox, Instagram, Url, Cameras and many more awesome locations. It can easily be integrated by anyone who knows javascript and can read a doc.

Lets get our hands dirty.

Before we get started; Here’s my project structure.

Installation

npm install --save uppy //inside the client directory

npm install — save uppy-server //inside the server/root directory

React Side

Configuration

Add uppy by making a new Uppy component in your project. Let’s call it UppyComp.js

• Now, Let’s import our vars shall we:

UppyComp.js

import React, { Component } from "react";

const Uppy = require("uppy/lib/core");
const AwsS3 = require("uppy/lib/plugins/AwsS3");
const GoogleDrive = require("uppy/lib/plugins/GoogleDrive");
const Dropbox = require("uppy/lib/plugins/Dropbox");
const { Dashboard } = require("uppy/lib/react");

• Now, Instantiate the Uppy object

export default class UppyComp extends Component {
  componentWillMount() {
    this.host = "localhost:5000";

    this.uppy = new Uppy({
          autoProceed: false,
          restrictions: {
          maxFileSize: 10000000, //uppy options
          maxNumberOfFiles: 30,
          minNumberOfFiles: 1,
          allowedFileTypes: false
        })
         .use(AwsS3, {
          host: this.host
          })
         .use(GoogleDrive, {
          host: this.host
          })
         .use(Dropbox, { host: this.host }).run();

• Finally, render the Uppy component using ‘Dashboard’

render() {
    return (
      <div>
        <Dashboard //uppy dashboard component
          uppy={this.uppy}
          plugins={[
            "GoogleDrive",
            "Dropbox"//you can add more plugins here
          ]}
        />
      </div>
    );
  }
}

This is basically it for the react/frontend side.

Now we need to make sure uppy-server is also running alongside our node server to tackle remote(google, Dropbox) file uploads.
Just keep in mind that uppy and uppy-server are two different things.

Now, Coming to the backend or node side of our application.

Node/Backend side

I assume you have installed uppy-server dependency using npm at the backend.
So all we need is to ensure we pass correct keys to the uppy-server instance and make it run concurrently with our node server. So keeping that in mind we can try to modify the root node file, usually Index.js .

I’m going to modify my existing index.js file containing the express implementation and routing logic. If you have a different implementation just add the code given below to the file where you’re handling application port.

Implementation
var express = require(“express”);
var path = require(“path”);
const uppy = require(“uppy-server”);

• initialise the port variable

const PORT = process.env.PORT || 5000;

• uppy-server initialisation and configuration function, also don’t forget to move you app.listen(port) to this function and allow uppy.socket() to run it for you.

function initUppy() {
    uppyOptions = {
        providerOptions: {
            google: {
                key: "your google client id/key",
                secret: "your google client secret"
            },
            dropbox: {
                key: "your Dropbox client id/key",
                secret: "your Dropbox client secret"
            },
            s3: {
                key: "Your S3 key",
                secret: "Your S3 secret",
                bucket: "Your S3 bucket url",//e.g. mybucket123
                region: "Your S3 region "// e.g. ap-south-1 they skipped this one in their official doc. Don't forget to pass this.
            }
        },
        server: {
            host: "localhost:5000",//your host. could be yoursite.com
            protocol: "http"//your protocol. http or https.
        },
        filePath: "./downloads",//filepath to store users' temporary files, before uploading them.
        secret: "some-secret",//could be any string.
        debug: false//set true to recieve uppy logs.
    };

    app.use(uppy.app(uppyOptions));//instantiate uppy server.
    uppy.socket(app.listen(PORT), uppyOptions);//move your app.listen here.
}

That’s all folks

I had a few hiccups while setting Uppy, AWS S3, Google, Dropbox and Instagram. But Uppy team provides good support on their Github issues page.
Feel free to reach out to me or raise an issue on their Github page, if you’re facing any problem.

Happy Coding.