WithDragAndDropUpload

To enable drag-and-drop uploads, wrap your UI with WithDragAndDropUpload. Each MessageInputFlat (the default UI for MessageInput) 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

<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 individually (the second in the example is inside 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.

// 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>

Props