Usage

Getting started with Uploady is very easy. You can get a simple upload flow in a matter of minutes.

Simple Example

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const App = () => (
	<Uploady destination={{ url: "https://my-server.com/upload" }}>
		<UploadButton/>
	</Uploady>
);

In many cases you'd want a custom button or re-use a component you're already using. In this case you can wrap it with the handy asUploadButton:

With Custom Button

import React from "react";
import Uploady from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";

const DivUploadButton = asUploadButton((props) => {
    return <div {...props} style={{ cursor: "pointer" }}>
        DIV Upload Button
    </div>
});

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

The code samples above show the very basic Uploady usage.

You can play around with this simple live example:

Once you have Uploady in your app you can start thinking about more advanced flows. For example: Showing upload progress, cancelling running uploads, queuing, etc.

Many of these use-cases are described in the Guides section and some can be explored in the live sandboxes below.

More Sandboxes

Crop & Upload

Example code integrating react-uploady with react-image-crop.

Paste to Upload

Example of React-Uploady's paste-to-upload HOC in action. Can also be combined with other components Uploady's or not

Two Fields with Single Uploady

Show two fields with different configuration and separate previews with a single Uploady instance

With Ant Design

Example of upload queue using React-Uploady and Ant Design

Preview with Progress

Show progress by changing the image preview opacity until fully uploaded

Upload with Form

use react-uploady to submit a form with a file and additional fields

Drag & Drop

example implementation of react-uploady with drag & drop together with asUploadButton