WithDragAndDropUpload

If you want to allow your users to upload files by dragging the selected files and dropping them onto the general chat window, you’ll need to wrap your UI elements with this component. Each MessageInputFlat (default UI component of the MessageInput component) comes wrapped with WithDragAndDropUpload component by default. This component works by rendering a parent element which wraps your UI elements with pre-registered event handlers for drag & drop file upload functionality.

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>

Note that each MessageInput component (the second one is rendered by the Thread component in this example) should be wrapped individually - if rendered under one WithDragAndDropUpload component, both of the inputs will receive the same event and thus will start uploading the same set of files. Also note that the topmost element (wrapper) of the WithDragAndDropUpload component comes out of the box with no styling - apply necessary styling (or classes) accordingly*.

*Internal UI of the WithDragAndDropUpload component is rendered with absolute positioning and expects either the topmost element (wrapper) or the element containing this component to have its position set to relative. If not respected, the UI can overflow which can lead to unexpected results.

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

className

Custom class for the topmost element (wrapper)

style

Other option to apply styling (or CSS variables) to the topmost element (wrapper)

component

Element type to render instead of the default