# File Upload (/docs/components/file-upload)



<ComponentPreview name="basic-upload" />

## Installation [#installation]

<Tabs items="[&#x22;Command&#x22;, &#x22;Manual&#x22;]">
  <Tab value="Command">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @uploadcn/file-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @uploadcn/file-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @uploadcn/file-upload
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @uploadcn/file-upload
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Manual">
    Install [Upload](/docs/components/upload) first, then copy:

    <ComponentSource name="file-upload" />
  </Tab>
</Tabs>

## Usage [#usage]

```tsx
import { FileUpload } from "@/components/file-upload"
```

```tsx
<FileUpload
  accept="image/*,application/pdf"
  maxSize={20_000_000}
  maxFiles={10}
/>
```

## Props [#props]

<TypeTable
  type="{
  adapter: {
    type: &#x22;UploadAdapter&#x22;,
    default: 's3Adapter({ endpoint: &#x22;/api/upload&#x22; })',
    description: &#x22;Where files go.&#x22;,
  },
  accept: {
    type: &#x22;string | string[]&#x22;,
    description: &#x22;Accepted types: MIME types, wildcards or extensions.&#x22;,
  },
  maxSize: { type: &#x22;number&#x22;, description: &#x22;Max size per file, in bytes.&#x22; },
  maxFiles: { type: &#x22;number&#x22; },
  image: {
    type: &#x22;ImageConstraints&#x22;,
    description: &#x22;Min/max image dimensions.&#x22;,
  },
  media: {
    type: &#x22;MediaConstraints&#x22;,
    description: &#x22;Min/max audio/video duration.&#x22;,
  },
  autoUpload: {
    type: &#x22;boolean&#x22;,
    default: &#x22;true&#x22;,
    description: &#x22;When false, files wait for the Upload button.&#x22;,
  },
  multiple: { type: &#x22;boolean&#x22; },
  disabled: { type: &#x22;boolean&#x22; },
  title: { type: &#x22;ReactNode&#x22; },
  description: {
    type: &#x22;ReactNode&#x22;,
    description: &#x22;Defaults to a summary of the limits.&#x22;,
  },
  onSuccess: { type: &#x22;(item) => void&#x22; },
  onComplete: {
    type: &#x22;(items) => void&#x22;,
    description: &#x22;Called when the queue drains.&#x22;,
  },
}"
/>

## Examples [#examples]

### Multiple files [#multiple-files]

<ComponentPreview name="multiple-upload" />

### Batch upload [#batch-upload]

<ComponentPreview name="batch-upload" />

### S3 presigned [#s3-presigned]

<ComponentPreview name="s3-presigned" />