# File Upload
A drop zone or button for choosing files, and a list of the files chosen.
Source: [file-upload.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/file-upload.tsx)
```tsx
import { UploadIcon } from "lucide-react";
import {
FileUpload,
FileUploadDropzone,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemRemove,
FileUploadList,
formatFileSize,
} from "@/components/ui/file-upload";
const maxSize = 10_000_000;
export default function FileUploadBasic() {
return (
Drop files or click to browseImages and PDFs, up to {formatFileSize(maxSize)}
{(file) => (
)}
);
}
```
## Installation
Add the registry, once per project:
```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```
Then add the component:
```bash
npx shadcn@latest add @jarvis/file-upload
```
## Usage
```tsx
import { UploadIcon } from "lucide-react";
import {
FileUpload,
FileUploadDropzone,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemRemove,
FileUploadList,
} from "@/components/ui/file-upload";
export function Attachments() {
return (
Drop files or click to browse
{(file) => (
)}
);
}
```
`FileUpload` holds the chosen files as `File` objects. It doesn't upload them: send them yourself,
or give it a `name` to submit them with a form.
`FileUploadDropzone` accepts dropped files and opens the file picker on click. It's a button, so
use spans inside it. `FileUploadList` renders its child for each file. `FileUploadItemMetadata`
shows the file's name and size, and cuts a long name in the middle with
[Truncate](https://ui.jarv.is/components/truncate.md), so its extension stays in sight.
`accept`, `maxSize` and `maxFiles` reject files, and `onFileReject` tells you which and why.
## Composition
- `FileUpload`
- `FileUploadDropzone`
- `FileUploadTrigger`
- `FileUploadList`
- `FileUploadItem`
- `FileUploadItemPreview`
- `FileUploadItemMetadata`
- `FileUploadItemProgress`
- `FileUploadItemRemove`
## Examples
### Upload progress
Put a `FileUploadItemProgress` in `FileUploadItemMetadata` to show progress while a file uploads.
```tsx
import { UploadIcon } from "lucide-react";
import * as React from "react";
import {
FileUpload,
FileUploadDropzone,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemProgress,
FileUploadItemRemove,
FileUploadList,
} from "@/components/ui/file-upload";
// Stands in for a real upload, which would report progress from XMLHttpRequest's upload events.
function fakeUpload(onProgress: (percent: number) => void) {
let percent = 0;
const timer = setInterval(() => {
percent = Math.min(percent + 6 + Math.random() * 14, 100);
onProgress(Math.round(percent));
if (percent === 100) clearInterval(timer);
}, 300);
}
export default function FileUploadWithProgress() {
const [files, setFiles] = React.useState([]);
const [progress, setProgress] = React.useState(() => new Map());
function addFiles(next: File[]) {
for (const file of next) {
if (files.includes(file)) continue;
fakeUpload((percent) => setProgress((current) => new Map(current).set(file, percent)));
}
setFiles(next);
}
return (
Drop files or click to browse
{(file) => {
const percent = progress.get(file) ?? 0;
return (
{percent < 100 ? : null}
);
}}
);
}
```
### With a label
Point a `FieldLabel` at the dropzone's `id`, or leave out `htmlFor` and the label names the dropzone
and the trigger itself. Set `invalid` on the `Field` and explain a rejected file with a `FieldError`.
The dropzone and the trigger read out the field's `FieldDescription` and `FieldError`, and turn
invalid or disabled with the field.
```tsx
import { UploadIcon } from "lucide-react";
import * as React from "react";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import {
FileUpload,
FileUploadDropzone,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemRemove,
FileUploadList,
} from "@/components/ui/file-upload";
export default function FileUploadWithField() {
const [error, setError] = React.useState(null);
return (
Import contacts setError(null)}
onFileReject={(file, reason) =>
setError(
reason === "type" ? `${file.name} isn't a CSV file.` : `${file.name} is over 5 MB.`,
)
}
>
Drop a CSV file or click to browse
{(file) => (
)}
{error ? (
{error}
) : (
One contact per row, up to 5 MB.
)}
);
}
```
### In a form
Give a `Field` or the upload a `name`, and the files submit under it, each as its own value, so
`formData.getAll(name)` returns them. Pass `form` with a form's `id` when the upload sits outside
it. With `required`, the form won't submit without a file, which fails as `valueMissing`. A form
reset brings back `defaultValue`. A `Form`'s `onFormSubmit` gets the `File` objects as an array.
```tsx
import { UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import {
FileUpload,
FileUploadDropzone,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemRemove,
FileUploadList,
} from "@/components/ui/file-upload";
import { Form } from "@/components/ui/form";
import { toast } from "@/components/ui/toast";
export default function FileUploadForm() {
return (
);
}
```
### With a button
`FileUploadTrigger` opens the file picker from a button, when a drop zone would take too much room.
```tsx
import { PaperclipIcon } from "lucide-react";
import {
FileUpload,
FileUploadItem,
FileUploadItemMetadata,
FileUploadItemPreview,
FileUploadItemRemove,
FileUploadList,
FileUploadTrigger,
} from "@/components/ui/file-upload";
export default function FileUploadWithButton() {
return (
Attach files
{(file) => (
)}
);
}
```
### Disabled
```tsx
import { UploadIcon } from "lucide-react";
import { FileUpload, FileUploadDropzone } from "@/components/ui/file-upload";
export default function FileUploadDisabled() {
return (
Uploads are pausedYour workspace is out of storage.
);
}
```
## Props
The file also exports `formatFileSize(bytes)`, which returns a size such as "2.4 MB".
| Part | Extends |
| --- | --- |
| `FileUpload` | `