Skip to main content

DropFileArea

DropFileArea is a drop zone for selecting files by drag-and-drop or click-to-browse. It's a controlled component: you own the selected-files array and the error string, and it calls back when they should change — so validation and state live in your form.

When to use​

  • File upload fields, attachment pickers, import screens.
  • Anywhere you want drag-and-drop with your own validation and error handling.

Import​

import { DropFileArea } from '@spartanfx/react';

Basic usage​

DropFileArea is controlled through four required props: the current selectedFiles, an onChange to update them, and error / setError for the message.

function Uploader() {
  const [files, setFiles] = React.useState<File[]>([]);
  const [error, setError] = React.useState('');

  return (
    <DropFileArea
      selectedFiles={files}
      onChange={setFiles}
      error={error}
      setError={setError}
      label="Drop files here or click to browse"
    />
  );
}

Restrict types and allow multiple​

import { DropFileArea, MimeTypes } from '@spartanfx/react';

<DropFileArea
  selectedFiles={files}
  onChange={setFiles}
  error={error}
  setError={setError}
  multiple
  maxFiles={5}
  allowedTypes={[MimeTypes.pdf, MimeTypes.png]}
  helperText="PDF or PNG, up to 5 files."
/>

Key props​

PropTypeNotes
selectedFiles (required)File[]Currently selected files (you own this).
onChange (required)(files) => voidCalled when the selection changes.
error (required)stringError message shown below the zone.
setError (required)(msg) => voidCalled to update the error.
allowedTypesMimeTypes[]Accepted MIME types (all if omitted).
multiple / maxFilesboolean / numberAllow many files, optionally capped.
label / helperTextstringZone label and helper text.

See the full generated reference: DropFileArea API ↗.

See also​