Installation

One dependency, no peer setup, no CSS import. React 16 and up.

npm install uplofile

Optional: a local wrapper

The exports are generic names. Most projects re-export them once with their own defaults so app code never repeats the upload function.

src/components/uplofile.tsx
import * as Uplofile from "uplofile";
const UplofileRoot = Uplofile.Root;
const UplofileTrigger = Uplofile.Trigger;
const UplofileHiddenInput = Uplofile.HiddenInput;
const UplofileDropzone = Uplofile.Dropzone;
const UplofilePreview = Uplofile.Preview;
const UplofileCancel = Uplofile.Cancel;
const UplofileRetry = Uplofile.Retry;
const UplofileRemove = Uplofile.Remove;
export {
UplofileRoot,
UplofileTrigger,
UplofileHiddenInput,
UplofileDropzone,
UplofilePreview,
UplofileCancel,
UplofileRetry,
UplofileRemove,
};
export type { UploadFileItem, UploadStatus } from "uplofile";

What ships

Rootstate + context
Triggeropens the picker
Dropzonedrop target
Previewthe file list
HiddenInputclassic form post
Cancel · Retry · Removeaction buttons
useUplofile()context hook
isImageFile …helpers