---
title: "FileUploadButton"
description: "Choosing files: a button that opens the file chooser or the camera, a drop zone, and a progress row per upload. They upload nothing; the app sends the files."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# FileUploadButton

## Buttons

The camera button suits phones; hide it on larger screens with a class.

```tsx
import { useState } from 'react';
import { FileUploadButton } from '@arbol-ai/ui';

const ButtonsExample = () => {
  const [chosen, setChosen] = useState<string[]>([]);
  const choose = (files: File[]) => {
    setChosen(files.map((file) => file.name));
  };
  return (
    <div className="grid gap-3">
      <div className="flex flex-wrap gap-2">
        <FileUploadButton
          acceptedFileTypes={['application/pdf', 'image/*']}
          allowsMultiple
          onSelect={choose}
        />
        <FileUploadButton acceptedFileTypes={['image/*']} defaultCamera="environment" onSelect={choose} />
      </div>
      <p className="text-muted-foreground text-sm">
        {chosen.length > 0 ? chosen.join(', ') : 'No file chosen yet.'}
      </p>
    </div>
  );
};

<ButtonsExample />
```

## Drop zone with progress

```tsx
import { useState } from 'react';
import { DropZone, UploadProgress } from '@arbol-ai/ui';

const UploadExample = () => {
  const [names, setNames] = useState<string[]>(['authorization.pdf']);
  return (
    <div className="grid max-w-md gap-4">
      <DropZone
        acceptedFileTypes={['application/pdf', 'image/*']}
        allowsMultiple
        description="PDF or images, up to 10 MB."
        onSelect={(files) => {
          setNames([...names, ...files.map((file) => file.name)]);
        }}
      />
      {names.map((name) => (
        <UploadProgress key={name} name={name} value={0.6} />
      ))}
      <UploadProgress errorMessage="The file is larger than 10 MB." name="clinical-history.pdf" />
    </div>
  );
};

<UploadExample />
```

## Source

The examples above are [`src/components/file-trigger/file-trigger.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/file-trigger/file-trigger.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/pickers/file-trigger/index.mdx