Installation

Uplofile is a composable file upload component for React. It allows you to build your own UI with small, accessible primitives: context‑driven Root, Trigger, Dropzone, Preview, and helpers for cancel/retry/remove — with progress and drag‑and‑drop.

• React 16+ compatible
• Drag & drop, click‑to‑upload, and render‑props APIs
• Progress, cancel, retry, and optimistic/strict remove flows
• Hidden input with JSON of successful uploads for regular form submits
• You can style however you like (Tailwind recommended)

Install

You can add Uplofile to your project site by installing the uplofile package. Follow these steps:

1. Select your package manager:

   NPM

   npx add uplofile

   PNPM

   pnpm add uplofile

   YARN

   yarn add uplofile

2. Create a file file-uploader.tsx in your src/components directory

3. Copy and paste the following code:

   file-uploader.tsx

   "use client";
   
   import * as FileUploaderPrimitive from "uplofile";
   
   const FileUploader = FileUploaderPrimitive.Root;
   
   const FileUploaderTrigger = FileUploaderPrimitive.Trigger;
   
   const FileUploaderInput = FileUploaderPrimitive.HiddenInput;
   
   const FileUploaderDropzone = FileUploaderPrimitive.Dropzone;
   
   const FileUploaderPreview = FileUploaderPrimitive.Preview;
   
   const FileUploaderCancel = FileUploaderPrimitive.Cancel;
   
   const FileUploaderRetry = FileUploaderPrimitive.Retry;
   
   export {
     FileUploader,
     FileUploaderTrigger,
     FileUploaderInput,
     FileUploaderDropzone,
     FileUploaderPreview,
     FileUploaderCancel,
     FileUploaderRetry,
   };

4. Then import and use in your app.

5. You’re done! 🎉

Styling

• Bring your own styles or Tailwind. The package includes default styles with Tailwind.