react-uploader

React File Upload Widget
(With Integrated Cloud Storage)

React Wrapper for Uploader • Developed by Upload.io

Quick Start — Try on CodePen

To implement the above widget:

npm install react-uploader

import { Uploader } from "uploader";
import { UploadButton } from "react-uploader";

const uploader = Uploader({
  // Get production API keys from Upload.io
  apiKey: "free"
});

<UploadButton uploader={uploader}
              options={{multi: true}}
              onComplete={files => console.log(files)}>
  {({onClick}) =>
    <button onClick={onClick}>
      Upload a file...
    </button>
  }
</UploadButton>

Installation

Install via NPM:

npm install react-uploader

Or via YARN:

yarn add react-uploader

Or via a <script> tag:

<script src="https://js.upload.io/react-uploader/v2"></script>

UploadButton — Try on CodePen

The UploadButton component uses a render prop to provide an onClick callback to your button element.

When clicked, a file upload modal will appear:

import { Uploader } from "uploader"; // Installed by "react-uploader".
import { UploadButton } from "react-uploader";

// Initialize once (at the start of your app).
const uploader = Uploader({
  apiKey: "free" // Get production API keys from Upload.io
});

// Configuration options: https://upload.io/uploader#customize
const options = { multi: true };

const MyApp = () => (
  <UploadButton uploader={uploader}
                options={options}
                onComplete={files => alert(files.map(x => x.fileUrl).join("\n"))}>
    {({onClick}) =>
      <button onClick={onClick}>
        Upload a file...
      </button>
    }
  </UploadButton>
);

Required props:

• uploader
• children

Optional props:

• options
• onComplete

UploadDropzone — Try on CodePen

The UploadDropzone component renders an inline drag-and-drop file upload dropzone:

import { Uploader } from "uploader"; // Installed by "react-uploader".
import { UploadButton } from "react-uploader";

// Initialize once (at the start of your app).
const uploader = Uploader({
  apiKey: "free" // Get production API keys from Upload.io
});

// Configuration options: https://upload.io/uploader#customize
const options = { multi: true };

const MyApp = () => (
  <UploadDropzone uploader={uploader}
                  options={options}
                  onUpdate={files => alert(files.map(x => x.fileUrl).join("\n"))}
                  width="600px"
                  height="375px" />
);

Required props:

• uploader

Optional props:

• options
• onUpdate
• width
• height

The Result

The callbacks receive a Array<UploaderResult>:

{
  fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).

  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.

  originalFile: {
    fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
    accountId: "FW251aX",                // Upload.io account the file was uploaded to.
    originalFileName: "example.jpg",     // Original file name from the user's machine.
    file: { ... },                       // Original DOM file object from the <input> element.
    size: 12345,                         // File size in bytes.
    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
    mime: "image/jpeg",                  // File MIME type.
    metadata: {
      ...                                // User-provided JSON object.
    },
    tags: [
      "tag1",                            // User-provided & auto-generated tags.
      "tag2",
      ...
    ]
  }
}

Full Documentation

React Uploader is a wrapper for Uploader — see the Uploader Docs 📖

Where are my files stored?

Uploader uses Upload.io as a file storage & file hosting backend.

Upload.io benefits developers with:

• Zero Setup (Start uploading in the next few minutes!)
• Pre-Integrated Storage (All you need is an Upload API key)
• Fast File Hosting (Worldwide CDN, 300 Nodes)
• Powerful Rules Engine (Rate Limiting, Traffic Limiting, IP Blacklisting, Expiring Links, etc)
• File Transformations (Image Resizing, Cropping, Optimization, etc)

🔧 Can I bring my own file storage?

Yes! Upload.io supports custom S3 buckets. You are still required to create an account.

Contribute

If you would like to contribute to Uploader:

1. Add a GitHub Star to the project (if you're feeling generous!).
2. Determine whether you're raising a bug, feature request or question.
3. Raise your issue or PR.

License

MIT