Form

File Upload

A drop zone plus a "Choose files" button, with type, size and count validation and a removable file list.

Drop files herePDF or images, up to 5 MB each

Usage

  • Use for attachments, imports and avatars inside forms.
  • Say the accepted types and size limit in description, before people pick a file.
  • Don’t rely on client checks alone; validate on the server too.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/FileUploadExample.tsx
import { Field, FileUpload } from '@krackedui/motion';

export function Attachments() {
  return (
    <Field label="Attachments">
      <FileUpload
        multiple
        accept=".pdf,image/*"
        maxSize={5 * 1024 * 1024}
        label="Drop files here"
        description="PDF or images, up to 5 MB each"
        onFilesChange={(files) => console.log(files)}
      />
    </Field>
  );
}

Examples

Single file

Without multiple, a new file replaces the current one.

Square PNG or SVG works best.

Drop an imagePNG or SVG, up to 1 MB

Invalid and disabled

Drop the PDF here

Upload the signed contract.

Imports are paused

Dark theme

Drop files hereAny file, up to 10 MB

API Reference

FileUpload

A <div>; the ref goes to the root. A native <input type="file"> does the picking.

PropTypeDefault
accept
string
multiple
boolean
false
maxSize
number
maxFiles
number
files / defaultFiles
File[]
onFilesChange
(files: File[]) => void
onReject
(rejections: FileRejection[]) => void
label
ReactNode
"Drop files here"
description
ReactNode
buttonLabel
string
"Choose files" / "Choose file"
invalid
boolean
false
disabled
boolean
false
required
boolean
false
name
string
id
string
className
string
style
CSSProperties
aria-describedby
string

Helpers

PropTypeDefault
formatBytes(bytes)
(bytes: number) => string
acceptsFile(file, accept?)
(file: File, accept?: string) => boolean

Accessibility

  • "Choose files" is a real button (Tab, Enter, Space) that opens the system file dialog; dropping is a pointer shortcut, never the only way.
  • Rejections are written to a role="alert" region and linked to the button with aria-describedby; the button gets aria-invalid.
  • Each listed file has a "Remove <name>" button; removing returns focus to the file button.
© 2026 Motion. Internal documentation.