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)