ReactFileUploader

Reusable React file uploader component without Ant Design or Next.js dependencies.

Documentation

• Live docs and playground: https://moncadayunuen.github.io/react_fileuploader/
• GitHub repository: https://github.com/moncadayunuen/react_fileuploader
• npm package: https://www.npmjs.com/package/@yunuenm23/react-file-uploader

Install locally

npm install
npm run build

Local documentation

npm run dev

Open http://127.0.0.1:5173/.

Public docs: https://moncadayunuen.github.io/react_fileuploader/

Publish package

npm login
npm run typecheck
npm run build
npm publish --access public

Deploy docs

Vercel:

• Build command: npm run build:docs
• Output directory: docs-dist

GitHub Pages:

• Push to main.
• Enable Pages with GitHub Actions as the source.
• The included workflow deploys docs-dist.

Usage

import { ReactFileUploader } from "@yunuenm23/react-file-uploader";
import "@yunuenm23/react-file-uploader/styles.css";

export function Example() {
  return (
    <ReactFileUploader
      acceptFiles={["image/*", "video/*", "audio/*", "application/pdf"]}
      maxFiles={3}
      maxSizeFile={2}
      imageCompression={{ enabled: true, mode: "lossless" }}
      multipleFiles
      theme={{
        accent: "#7c3aed",
        accentSoft: "#ede9fe",
        success: "#059669",
        danger: "#e11d48",
      }}
      onFilesSelected={(files) => {
        console.log(files);
      }}
    />
  );
}

Main props

• acceptFiles: MIME types or extensions, for example ["image/*", "video/*", "audio/*", ".pdf"].
• maxSizeFile: max size in MB.
• imageCompression: optimizes supported images before validation and selection.
• multipleFiles: enables multi-file selection.
• maxFiles: approved file limit.
• validateDimensions: validates image width and height.
• dimensions: max image dimensions.
• onFilesSelected: receives one File or a File[].
• onFilesChange: receives the full validated item list.
• labels: overrides the visible copy.
• theme: overrides the default colors.

Images, videos, and audio files render compact clickable thumbnails that open a larger preview. Document-like files render as downloadable items. The package also exports useFileUploader if you want to build a fully custom UI with the same validation logic.

You can theme the component with the theme prop or by overriding CSS variables such as --file-uploader-accent, --file-uploader-surface, and --file-uploader-border.

imageCompression={{ enabled: true, mode: "lossless" }} optimizes SVG and PNG only when the optimized file is smaller. JPEG and WebP are kept unchanged in lossless mode. Use mode: "balanced" with a quality value only when you accept browser re-encoding.