@rqdhw3n/react-upload-zone

Premium drag & drop file upload zone for React.

Features

• Drag & drop + click to browse
• File validation (type, size, custom validator)
• Presets: CSV, XLS, XLSX, PDF, images, spreadsheets
• Image preview thumbnails
• Upload progress bars
• Light / dark / auto theme
• TypeScript
• Mobile-friendly (touch targets, tap highlight)
• CSS animations
• Custom icons & labels
• Multiple files + remove
• Error states

Install

npm install @rqdhw3n/react-upload-zone

Peer dependencies: react >= 17, react-dom >= 17

Usage

import { UploadZone } from '@rqdhw3n/react-upload-zone'
import '@rqdhw3n/react-upload-zone/styles.css'

function App() {
  const [files, setFiles] = useState<UploadZoneFile[]>([])

  return (
    <UploadZone
      value={files}
      onChange={setFiles}
      acceptPresets={['csv']}
      maxSize={5 * 1024 * 1024}
      labels={{
        title: 'Drag & drop your CSV here',
        subtitle: 'or click to browse',
        browse: 'Browse files',
      }}
      onUpload={async (file, reportProgress) => {
        // your API call with progress
        reportProgress(50)
        await uploadToServer(file)
        reportProgress(100)
      }}
    />
  )
}

CSV only (like Import Reviews)

<UploadZone
  acceptPresets={['csv']}
  maxSize={5 * 1024 * 1024}
  theme="light"
  onChange={(files) => setCsv(files[0]?.file ?? null)}
/>

Multiple images with preview

<UploadZone
  multiple
  maxFiles={5}
  acceptPresets={['images']}
  showImagePreview
  theme="dark"
/>

Custom validator

<UploadZone
  validator={(file) =>
    file.name.endsWith('.csv') ? null : 'Only .csv files allowed'
  }
/>

Headless hook

import { useUploadZone } from '@rqdhw3n/react-upload-zone'

const zone = useUploadZone({
  multiple: true,
  acceptPresets: ['pdf', 'images'],
  maxSize: 10 * 1024 * 1024,
})

Publish to npm

cd react-upload-zone
npm login
npm publish --access public

License

MIT