Data Types

React Upload Widget

To install the React Upload Widget via NPM:

npm install react-uploader

To install via YARN:

yarn install react-uploader

To install via a script tag:

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

Option 1: Create an Upload Button

1// Installed by "react-uploader".
2import { Uploader } from "uploader";
3import { UploadButton } from "react-uploader";
4
5// Initialize once (at the start of your app).
6const uploader = Uploader({ apiKey: "free" }); // Replace "free" with your API key.
7
8const MyApp = () => (
9 <UploadButton uploader={uploader}
10 options={{ multi: true }}
11 onComplete={files => alert(files.map(x => x.fileUrl).join("\n"))}>
12 {({onClick}) =>
13 <button onClick={onClick}>
14 Upload a file...
15 </button>
16 }
17 </UploadButton>
18)

Props: uploaderchildrenoptions?onComplete?

Callback Parameter: Result

Options: Configuration

Live preview:

Option 2: Create a Dropzone Area

1// Installed by "react-uploader".
2import { Uploader } from "uploader";
3import { UploadDropzone } from "react-uploader";
4
5// Initialize once (at the start of your app).
6const uploader = Uploader({ apiKey: "free" }); // Replace "free" with your API key.
7
8const MyApp = () => (
9 <UploadDropzone uploader={uploader}
10 options={{ multi: true }}
11 onUpdate={files => alert(files.map(x => x.fileUrl).join("\n"))}
12 width="600px"
13 height="375px" />
14)

Props: uploaderoptions?onUpdate?width?height?

Callback Parameter: Result

Options: Configuration

Live preview:

Was this section helpful? Yes No

You are using an outdated browser.

This website requires a modern web browser -- the latest versions of these browsers are supported: