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>); 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>); 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>; 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>); 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> ); 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.
Top comments (0)