DEV Community

loading...
Cover image for react-uploady: uploading files in React

react-uploady: uploading files in React

Yoav Niran
I write  code and prose. https://github.com/rpldy/react-uploady - Modern file uploading components & hooks for React. https://whitecloudsbook.com - My first sci-fi novel.
・3 min read

Over the last few months I've been working on a new library called 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

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>);

Enter fullscreen mode Exit fullscreen mode

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> and anywhere inside you can use the <UploadButton> 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 hoc.

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>);

Enter fullscreen mode Exit fullscreen mode

Show Upload Progress

using rc-progress to display upload progress with the useItemProgressListener hook:


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>;

Enter fullscreen mode Exit fullscreen mode

Programmatically cancel uploads

Cancel any batch with more than 10 files using the useBatchStartListener hook:


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>);
Enter fullscreen mode Exit fullscreen mode

Show uploads previews

using the upload-preview component:


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>
);

Enter fullscreen mode Exit fullscreen mode

These examples only scratch the surface of react-uploady's potential.
There are some more advanced examples in the guides section or in RU's storybook.

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

Discussion (0)