Uplofile is open sourceStar on GitHub
Uplofile

Installation

Get started with Uplofile in your React project.

Install the package

Install Uplofile using your preferred package manager:

npm

1npm install uplofile

yarn

1yarn add uplofile

pnpm

1pnpm add uplofile

Create Component File

Create a file uplofile.tsx in your src/components directory:

1import * as Uplofile from "uplofile";
2

3const UplofileRoot = Uplofile.Root;
4const UplofileTrigger = Uplofile.Trigger;
5const UplofileHiddenInput = Uplofile.HiddenInput;
6const UplofileDropzone = Uplofile.Dropzone;
7const UplofilePreview = Uplofile.Preview;
8const UplofileCancel = Uplofile.Cancel;
9const UplofileRetry = Uplofile.Retry;
10const UplofileRemove = Uplofile.Remove;
11

12export {
13  UplofileRoot,
14  UplofileTrigger,
15  UplofileHiddenInput,
16  UplofileDropzone,
17  UplofilePreview,
18  UplofileCancel,
19  UplofileRetry,
20  UplofileRemove,
21};
22

23export type { UploadFileItem, UploadStatus } from "uplofile";

Basic Usage

Import and use the components in your app:

1import {
2  UplofileRoot,
3  UplofileDropzone,
4  UplofileTrigger,
5  UplofilePreview,
6} from "@/components/uplofile";
7

8function FileUpload() {
9  return (
10    <UplofileRoot>
11      <UplofileDropzone className="border-2 border-dashed p-8 rounded-lg">
12        <UplofileTrigger>Click or drop files here</UplofileTrigger>
13        <UplofilePreview />
14      </UplofileDropzone>
15    </UplofileRoot>
16  );
17}

Next Steps