osmandvc/react-upload-control

🚀 A modern, feature-rich file upload library for React applications. Built with TypeScript and designed for exceptional DX, it offers drag & drop, camera integration, file reordering, and extensive customization options - all while keeping implementation completely unopinionated.

Summary

react-upload-control is a TypeScript library for handling file uploads in React applications, distributed as a monorepo with two npm packages. The core package provides hooks, providers, and a state machine for managing the upload lifecycle, while a separate components package offers pre-built UI such as drag-and-drop and camera capture.

What it is useful for

The library targets engineers who need file upload functionality without adopting a heavyweight upload framework or committing to a specific UI kit. The core package ships hooks plus a state machine for the upload lifecycle, includes a built-in file ordering system, and lists zero runtime dependencies apart from an optional toaster. That makes it suitable for teams that want the upload plumbing handled but prefer to render their own UI, or for projects where minimizing dependency footprint is a priority.

The components package is useful when engineers want ready-made UI rather than building it from scratch. The README documents drag-and-drop, camera integration, and clipboard support, with styling powered by Tailwind. Projects already using Tailwind can adopt the components more directly; projects on a different styling system will need to rework the markup.

How engineers can use it

The README documents these install commands:

npm install @osmandvc/react-upload-control
npm install @osmandvc/react-upload-control-components

After installation, engineers can import hooks or providers from the core package and build their own UI on top, or import the pre-styled components for a faster setup. The components package handles drag-and-drop, camera capture, and clipboard events, removing the boilerplate typically required to wire those input types together.

For local development of the monorepo itself, the README lists commands to build packages (npm run build), run tests (npm run test), and launch Storybook (npm run storybook). An interactive demo is also referenced in the README for previewing the library without a local setup.

Documented constraints include: the library does not include backend integration, so engineers will need to connect it to their own API endpoints for actual upload requests. The components package is Tailwind-based, so adopting it in a non-Tailwind project requires additional styling work. The README does not describe browser support, accessibility guarantees, or file-size limits, so engineers should verify those against their own requirements before adopting it.