File upload

Collects validated files through browse or drop, with optional upload progress, cancellation, and retry.

Preview

Choose filesPDF or text, up to 10 MB each. Files stay on this device.

In action

Attach the context

Project files

Add a brief or notes. This example keeps the selected files on your device.

Choose project filesPDF or text, up to 10 MB each

When to use

Use it for

Validated attachment queues with native file browsing and drag-and-drop.
Provide onUpload when the app has a transport; it receives an AbortSignal and progress callback.

Not for

Assuming files upload automatically; without onUpload this only collects selected files.
Client checks as security enforcement; validate uploaded files again on the server.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { FileUpload } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/file-upload.

2. Vendor the source

npx @noorddev/vlak-cli add file-upload

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/file-upload.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { FileUpload } from "@noorddev/vlak-react";

<FileUpload label="Project files" name="attachments" accept=".pdf,.txt" maxFiles={5} maxSize={10 * 1024 * 1024} description="PDF or text, up to 10 MB each" />

Props

FileUpload

Validated file selection, with an optional cancellable upload transport.

Prop	Type	Default	Description
`value`	`File[]`
`defaultValue`	`File[]`	`[]`
`onValueChange`	`(files: File[]) => void`
`accept`	`string`
`multiple`	`boolean`	`true`
`maxFiles`	`number`
`maxSize`	`number`
`disabled`	`boolean`
`name`	`string`
`label`	`string`	`"Choose files"`
`description`	`ReactNode`	`"Drop files here or browse"`
`onReject`	`(rejections: FileUploadRejection[]) => void`
`onUpload`	`(file: File, context: FileUploadContext) => Promise<void>`		Optional transport supplied by the app. Omit to collect files without uploading.

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Tab, Enter, Space`	Reaches the native file picker and labeled Remove, Cancel, and Retry actions.

Accessibility

The native file input covers the drop target, remains keyboard-focusable, and receives the forwarded ref.
Rejected types, sizes and counts produce readable errors. Upload status is announced; progress bars are named with the file.
The app supplies onUpload(file, { signal, onProgress }). Cancel aborts the signal; errors retain the file and expose Retry.
With name, the browser's formdata event appends the accepted queue to native FormData. Use multipart/form-data for native file submission. Disabled queues are omitted.
Form reset restores uncontrolled files, clears errors and aborts active uploads. Unmount aborts outstanding transports.

Markup

<div class="rs-file-upload"><div class="rs-file-upload-drop"><span class="rs-file-upload-title">Choose files</span><span class="rs-file-upload-description" id="files-hint">Drop files here or browse</span><input class="rs-file-upload-input" type="file" multiple aria-label="Choose files" aria-describedby="files-hint" /></div></div>

Classes

.rs-file-upload.rs-file-upload-drop.rs-file-upload-drag.rs-file-upload-input.rs-file-upload-title.rs-file-upload-description.rs-file-upload-list.rs-file-upload-item.rs-file-upload-row.rs-file-upload-name.rs-file-upload-actions.rs-file-upload-action.rs-file-upload-status

Depends on

/button /progress