# WithDragAndDropUpload

To enable drag-and-drop uploads, wrap your UI with `WithDragAndDropUpload`.
Each [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) (the default UI for [`MessageInput`](/chat/docs/sdk/react/v13/components/message-input-components/message_input/)) is already wrapped with `WithDragAndDropUpload`. It renders a parent element with drag-and-drop handlers.

## Best Practices

- Wrap each `MessageInput` separately to avoid duplicate uploads.
- Ensure the wrapper (or parent) is `position: relative` for overlays.
- Keep wrapper styles minimal to prevent layout conflicts.
- Use `component` prop only when semantic HTML is required.
- Avoid nested wrappers unless you need layout control; only the outermost handles events.

## Basic Usage

```tsx
<Channel>
  <Window>
    <WithDragAndDropUpload
      style={{
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
        position: "relative",
      }}
    >
      <ChannelHeader />
      <MessageList />
      <AIStateIndicator />
      <MessageInput focus />
    </WithDragAndDropUpload>
  </Window>
  <WithDragAndDropUpload>
    <Thread />
  </WithDragAndDropUpload>
</Channel>
```

Wrap each [`MessageInput`](/chat/docs/sdk/react/v13/components/message-input-components/message_input/) individually (the second in the example is inside [`Thread`](/chat/docs/sdk/react/v13/components/core-components/thread/)). If both inputs share one wrapper, both will receive the same drag events and upload the same files. The wrapper has no default styling, so apply styles via `style` or `className`.\*

\*Internal UI uses `absolute` positioning and expects the wrapper (or a parent) to be `position: relative`. If not, the overlay can overflow.

<admonition type="note">

Nested `WithDragAndDropUpload` components render only a wrapper without handlers; the outermost component handles events.

```tsx
// renders <div style="position: relative;">...</div> with handlers and internal UI
<WithDragAndDropUpload style={{ position: "relative" }}>
  {/* renders <section class="w-dnd-1">...</section> without handlers */}
  <WithDragAndDropUpload component="section" className="w-dnd-1">
    <MessageInput />
  </WithDragAndDropUpload>
</WithDragAndDropUpload>
```

</admonition>

## Props

### className

Custom class for the wrapper element.

| Type   |
| ------ |
| string |

### style

Inline styles for the wrapper element.

| Type                  |
| --------------------- |
| `React.CSSProperties` |

### component

Element type to render instead of the default.

| Type                | Default |
| ------------------- | ------- |
| `React.ElementType` | `div`   |


---

This page was last updated at 2026-04-21T09:53:42.097Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/with-drag-and-drop-upload/](https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/with-drag-and-drop-upload/).