UploadDropzone

A dashed-border dropzone that accepts file uploads via drag-and-drop or a click-to-browse interaction. Files are validated against the accept type list, maxFileSize (in MB), and maxFiles count before being passed to onFilesSelected. Invalid files trigger onValidationError with a reason string and contextual info. The hidden file input is reset after each selection so the same file can be re-selected.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onFilesSelected | (files: File[]) => void | Yes | — | Callback fired with the array of valid files selected. | | multiple | boolean | No | false | Allows selecting more than one file at a time. | | accept | string \| string[] | No | — | Accepted MIME types or file extensions (e.g. 'image/*', ['.pdf', '.docx']). When omitted, all types are accepted. | | maxFileSize | number | No | — | Maximum allowed file size in megabytes. | | maxFiles | number | No | — | Maximum number of files in a single selection. | | disabled | boolean | No | false | Disables clicks and drag-and-drop. | | icon | string | No | 'upload' | Icon name displayed in the dropzone. | | iconSize | number | No | 40 | Size of the icon in pixels. | | iconColor | string | No | theme primary | Color of the icon. | | label | string | No | 'Upload File' | Label text displayed below the icon. | | labelStyle | React.CSSProperties | No | — | Inline styles for the label. | | labelClassName | string | No | — | CSS class name for the label element. | | onValidationError | (reason, info?) => void | No | — | Fired when a file fails validation. reason is 'maxFileSizeExceeded', 'maxFileCountExceeded', or 'invalidFileType'. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer dropzone container. | | containerClassName | string | No | — | CSS class name for the inner container. |

Usage

Basic image upload

import { UploadDropzone } from '@/components/UploadDropzone';

export default function Example() {
  return (
    <UploadDropzone
      accept="image/*"
      maxFileSize={5}
      onFilesSelected={(files) => console.log('Files:', files)}
      onValidationError={(reason, info) => console.warn(reason, info)}
    />
  );
}

Multiple files with count limit

import { UploadDropzone } from '@/components/UploadDropzone';

export default function Example() {
  return (
    <UploadDropzone
      multiple
      maxFiles={3}
      accept={['.pdf', '.docx']}
      maxFileSize={10}
      label="Drop up to 3 documents here"
      onFilesSelected={(files) => {
        files.forEach((f) => console.log(f.name));
      }}
      onValidationError={(reason) => alert(`Validation failed: ${reason}`)}
      containerStyle={{ height: 200 }}
    />
  );
}