# Global Upload (/docs/components/global-upload)



<ComponentPreview name="full-window-dropzone" />

## 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/global-upload
        ```
      </CodeBlockTab>

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

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

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

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

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

## Usage [#usage]

```tsx
import {
  GlobalDropzone,
  UploadProvider,
  UploadQueuePanel,
} from "@/components/global-upload"
```

```tsx
// app/layout.tsx
<UploadProvider persist>
  {children}
  <GlobalDropzone />
  <UploadQueuePanel />
</UploadProvider>
```

Any component under the provider can add files with `useUploadContext().addFiles(files)`. Uploads keep running during client-side navigation because the provider stays mounted. `GlobalDropzone` ignores drops already handled by an inner dropzone.

## Props [#props]

<TypeTable
  type="{
  adapter: {
    type: &#x22;UploadAdapter&#x22;,
    default: 's3Adapter({ endpoint: &#x22;/api/upload&#x22; })',
    description: &#x22;Where files go.&#x22;,
  },
  persist: {
    type: &#x22;boolean | UploadPersistence&#x22;,
    default: &#x22;false&#x22;,
    description: &#x22;Keep uploads in IndexedDB and restore them after reloads.&#x22;,
  },
  guard: {
    type: &#x22;boolean&#x22;,
    default: &#x22;true&#x22;,
    description: &#x22;Warn before leaving the page during uploads.&#x22;,
  },
  &#x22;...options&#x22;: {
    type: &#x22;UploaderOptions&#x22;,
    description: &#x22;Any uploader option (accept, maxSize, concurrency...).&#x22;,
  },
}"
/>

## Examples [#examples]

### Background uploads [#background-uploads]

<ComponentPreview name="background-upload" />