Forms

FileUpload

Drop files or browse for them; type and size are checked first.

import { FileUpload } from "@flinbu/seed";

With progress

Set progress on each file while you upload it.

Drop a tokens file or browse

DTCG or Tokens Studio JSON, up to 2 MB.

tokens.json38 KB
figma-export.json64%

import { FileUpload } from "@flinbu/seed";

const [files, setFiles] = React.useState<UploadFile[]>([{ id: "a", name: "tokens.json", size: 38400 }, { id: "b", name: "figma-export.json", size: 412000, progress: 64 }]);

<div className="w-full max-w-md">
  <FileUpload files={files} onFilesChange={setFiles} accept=".json" maxSize={2 * 1024 * 1024} title="Drop a tokens file or browse" hint="DTCG or Tokens Studio JSON, up to 2 MB." />
</div>

Use it for

Imports: token files, Figma exports, images.

Props

Prop	Type	Default	Description
`files / defaultFiles`	`UploadFile[]`	–	{ id, name, size, type?, file?, progress?, error? }.
`onFilesChange`	`(files) => void`	–	New files arrive with error set when they fail.
`accept`	`string`	–	Like <input accept>: .json,image/*.
`maxSize`	`number`	–	Bytes.
`multiple`	`boolean`	`true`	More than one file.
`title / hint / buttonLabel`	`ReactNode`	–	Texts in the drop zone.

Accessibility

The Browse button opens the file dialog; dropping is a shortcut, never the only way.
Errors are written next to each file; uploads show a named progress bar.