@osmandvc/react-upload-control-components

React Upload Control Components

Pre-built UI components for React Upload Control, providing a beautiful and feature-rich file upload experience. This package is part of the React Upload Control ecosystem.

Demo

Check out our interactive demo cases here:
React Upload Control Demo

Features 🔥

• 📁 Drag & Drop: Intuitive file uploading with visual feedback and validation
• 📋 File Management: Built-in drag-to-reorder capability for organizing uploads
• 📷 Camera Integration: Optional camera integration for capturing photos directly
• 🎨 Beautiful UI: Modern, responsive design powered by Tailwind CSS
• 📱 Mobile Ready: Optimized experience across all device sizes
• 🔍 File Preview: Built-in preview support for images
• 📎 Clipboard Support: Paste files directly from clipboard

Installation

# Install the components package
npm install @osmandvc/react-upload-control-components

# Install the core package (peer dependency)
npm install @osmandvc/react-upload-control

Basic Usage

import { FileUploadControl } from "@osmandvc/react-upload-control-components";
import { UploadedFilesProvider } from "@osmandvc/react-upload-control";

function App() {
  return (
    <UploadedFilesProvider
      config={{
        mimeTypes: ["image/jpeg", "image/png"],
        maxFileSizeMb: 10,
        multiple: true,
      }}
      handlers={{
        onUpload: async (files) => {
          // Your upload logic
        },
      }}
    >
      <FileUploadControl />
    </UploadedFilesProvider>
  );
}

Available Components

FileUploadControl

The main component that combines all features:

<FileUploadControl
  size="auto" // 'auto' | 'sm' | 'lg'
  disableCamera={false} // Disable camera integration
  disableFileSystem={false} // Disable file system uploads
  disableClipboard={false} // Disable clipboard uploads
  className="custom-class" // Additional CSS classes
/>

Why a Separate Components Package?

1. Flexibility: Use only what you need. If you want to build your own UI, you can use just the core package
2. Bundle Size: Keep your bundle size minimal by only including the components you use
3. Styling Freedom: The components package includes styles, but you can build your own UI using the core package
4. Independent Updates: UI components can be updated without affecting core functionality

Contributing

We welcome contributions! Feel free to open issues or submit pull requests on our GitHub repository.

License

MIT © osmandvc