react-uploady: uploading files in React
Tags: react, upload, hooks, javascript
Published: 2020-05-06 15:50:15

Over the last few months I've been working on a new library called [react-uploady](https://github.com/rpldy/react-uploady). 

It's a monorepo with several packages built on top of each other to provide a very comprehensive library of file-upload related functionality. 

As a whole its orientation is toward React applications, although all of the base packages can be leveraged regardless of UI library/framework being used.

My focus in building it (aside from learning a lot) was to provide a very simple-to-use library, but also configurable and extensible. As well as a one-stop-shop for all file-upload needs.

I'd like to introduce it by way of a few examples:

### Simple upload button

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

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

```

That's all the code needed to get a working upload button in your app. 

You wrap your app or a part of your app with [\<Uploady\>](https://github.com/rpldy/react-uploady/tree/master/packages/ui/uploady) and anywhere inside you can use the [\<UploadButton\>](https://github.com/rpldy/react-uploady/tree/master/packages/ui/upload-button) component.

### Anything is an upload button

You don't have to use the UploadButton, you can turn any of your components into one with the [asUploadButton](https://github.com/rpldy/react-uploady/tree/master/packages/ui/upload-button#custom-upload-button-asuploadbutton) hoc.

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

const DivUploadButton = asUploadButton(forwardRef((props, ref) => {
    return <div {...props}
                style={{ border: "1px solid red", width: "200px", cursor: "pointer" }}
                id="div-upload">
        This is a DIV & Upload Button
    </div>
}));


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

```

### Show Upload Progress

using [rc-progress](https://www.npmjs.com/package/rc-progress) to display upload progress with the [useItemProgressListener](https://github.com/rpldy/react-uploady/tree/master/packages/ui/uploady#useitemprogresslistener-event-hook) hook:

```javascript

import React, { useState } from "react";
import { Circle } from "rc-progress";
import Uploady, { useItemProgressListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const UploadProgress = () => { 
   const [progress, setProgess] = useState(0);
   const progressData = useItemProgressListener();   

if (progressData && progressData.completed > progress) { 
     setProgess(() => progressData.completed);
   }  

 return progressData && <Circle style={{ height: "100px" }}              
                                  strokeWidth={2}
                                  strokeColor={progress === 100 ? "#00a626" : "#2db7f5"}
                                  percent={progress} />;
};

const App = () => <Uploady 
                destination={{ url: "http://sample-server.comm" }}>
    <UploadButton />
    <SampleProgress />
</Uploady>;

```

### Programmatically cancel uploads

Cancel any batch with more than 10 files using the [useBatchStartListener](https://github.com/rpldy/react-uploady/tree/master/packages/ui/uploady#usebatchstartlistener-event-hook) hook:

```javascript

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

const MyUploadButton = () => {   
    useBatchStartListener((batch) => {
        return (batch.items.length <= 10);  
    });

    return <UploadButton/>;
};

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

### Show uploads previews

using the [upload-preview](https://github.com/rpldy/react-uploady/tree/master/packages/ui/upload-preview) component:

```javascript

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";
 
export const App = () => (
     <Uploady>
      <UploadButton />

       <UploadPreview
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
    </Uploady>
);

```

##

These examples only scratch the surface of react-uploady's potential. 
There are some more advanced examples in the [guides section](https://github.com/rpldy/react-uploady/tree/master/guides) or in RU's [storybook](https://react-uploady-storybook.netlify.com/).

Hopefully this quick taste will make you give it a try next time you find yourself building a React app with file uploading features.