File Upload & Drag-and-Drop

<Chatbot> has built-in image and document upload, and users can also drag and drop files straight onto the chat window. The demo below connects to a real bot provider, so you can actually pick files, preview them, and drag-drop.

info

Uploads require a real botProviderEndpoint. In preview mode (botProviderEndpoint: "skip") the upload buttons still render, but the input is disabled and files are not uploaded.

Upload Toggles

Image upload (enableUpload)Document upload (enableDocumentUpload)

Drag an image or document straight onto the chatbot on the right to see the drop-zone overlay. Thumbnails / filenames preview above the input before you send.

Current Configuration

{
  "enableUpload": true,
  "enableDocumentUpload": true
}

Loading chatbot...

The two upload toggles

Prop	Shown in the footer	Accepted files
enableUpload	Image upload button	JPEG / JPG / PNG / GIF / WebP
enableDocumentUpload	Document upload button	PDF, Office, CSV, PPT, MP3 / MP4, HTML / XML / TXT / JSON

When 3 or more buttons are enabled (including enableExport), the footer collapses them into a single "+" menu.

File limits

Type	Allowed formats	Per-file limit	Count limit
Image	JPEG / JPG / PNG / GIF / WebP	20MB	10 files
Document	PDF, Office, CSV, PPT, MP3 / MP4, HTML / XML / TXT / JSON	20MB	10 files

Files exceeding the limits are rejected with an error indicator.

What gets attached when sending

After a user picks files, the SDK uploads them asynchronously right away and shows a preview above the input (image thumbnails / a document list). When the message is sent, this info is included in SendMessageParams:

Field	Description
blobIds	Blob ids of successfully uploaded files (both images and documents)
filePreviewUrls	Local preview URLs for images
documentNames	Original filenames for documents

Use onBeforeSendMessage to read or modify these fields before sending.

Code Example

import { Chatbot } from "@asgard-js/react";

export function Demo() {
  return (
    <Chatbot
      title="File Upload Demo"
      config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
      customChannelId="file-upload-demo"
      enableUpload
      enableDocumentUpload
    />
  );
}

Customizing drag-and-drop: useFileDropContext

Drag-and-drop is handled by <Chatbot> out of the box: dragging files over the window shows a drop-zone overlay, and on drop the files are automatically sorted into images / documents and enter the upload flow.

If you build a custom footer or want to own the drop zone yourself, use useFileDropContext:

import { useFileDropContext } from "@asgard-js/react";

function CustomDropZone() {
  const {
    droppedFiles,
    isDraggingOver,
    setDroppedFiles,
    setIsDraggingOver,
    clearDroppedFiles,
  } = useFileDropContext();

  // isDraggingOver: whether the user is dragging files over the window
  // droppedFiles: the File[] after a drop
  // setDroppedFiles / clearDroppedFiles: inject or clear pending files
  return null;
}

Field / method	Description
droppedFiles	The pending dropped File[]
isDraggingOver	Whether the user is dragging files over the window
setDroppedFiles	Set pending files programmatically
setIsDraggingOver	Set the dragging state (for custom overlays)
clearDroppedFiles	Clear pending files

See also

• Feature Toggles — toggle enableUpload / enableExport / enableDocumentUpload together
• Before Send Message — read blobIds / documentNames before sending
• Custom Footer — wiring upload and drag-drop into your own input row