# Attachment (https://dimah-s3.vercel.app/docs/react/ui/components/attachment)





`FileAttachment` and `StatusAttachment` are status row components built on top of [shadcn Attachment](https://ui.shadcn.com/docs/components/attachment).

## Preview [#preview]

<AttachmentPlaygroundPreview />

## Install [#install]

Complete [UI setup](https://dimah-s3.vercel.app/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items="[&#x22;npm package&#x22;, &#x22;shadcn registry&#x22;]">
  <Tab value="npm package">
    ```tsx
    import { FileAttachment, StatusAttachment } from "@dimah-s3/ui";
    ```
  </Tab>

  <Tab value="shadcn registry">
    <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 @dimah-s3/file-attachment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @dimah-s3/file-attachment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @dimah-s3/file-attachment
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @dimah-s3/file-attachment
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>
</Tabs>

***

## Usage [#usage]

```tsx
import { FileAttachment, StatusAttachment } from "@dimah-s3/ui";

// Uploading avatar row
<FileAttachment
  state="uploading"
  fileName="avatar.png"
  fileType="image/png"
  fileSize={180_000}
  percent={65}
  previewUrl="/dimah-avatar.jpg"
/>

// Generic status row
<StatusAttachment state="processing" title="Presigning URL…" />
```

***

## Props [#props]

```ts
import type { FileAttachmentProps, StatusAttachmentProps } from "@dimah-s3/ui";
```

### FileAttachment [#fileattachment]

<AutoTypeTable path="packages/ui/src/components/dimah-s3/attachment/file-attachment.tsx" name="FileAttachmentProps" />

### StatusAttachment [#statusattachment]

<AutoTypeTable path="packages/ui/src/components/dimah-s3/attachment/status-attachment.tsx" name="StatusAttachmentProps" />