Skip to main content


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: "" }}>

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

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

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.

Edit react-uploady - crop and upload

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

Edit react-uploady paste-to-upload demo

Two Fields with Single Uploady

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

Edit react-uploady - Two Fields with Single Uploady

With Ant Design

Example of upload queue using React-Uploady and Ant Design

Edit react-uploady with antd - upload with preview progress

Preview with Progress

Show progress by changing the image preview opacity until fully uploaded

Edit preview-progress-react-uploady

Upload with Form

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

Edit react-uploady - inside form

Drag & Drop

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

Edit react-uploady dnd with asUploadButton