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.

Restricting which MIME types can be uploaded

By default all formats in the tables above are accepted. To allow only a subset, pass allowedImageMimeTypes (with enableUpload) and/or allowedDocumentMimeTypes (with enableDocumentUpload). The demo below runs in preview mode — pick a preset, then open the attachment menu in the chatbot and the file picker will only offer the matching formats:

MIME Type Constraint

Default (all supported types)Images: PNG / JPEG onlyDocuments: PDF onlyImages: SVG (type outside the default list)

Pick a preset, then open the attachment menu (or image upload button) in the chatbot on the right — the file picker only offers the matching formats. This demo runs in preview mode and does not actually send.

Props passed

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

Loading chatbot...

<Chatbot
  // ...
  enableUpload
  enableDocumentUpload
  allowedImageMimeTypes={["image/png", "image/jpeg"]} // images: PNG / JPEG only
  allowedDocumentMimeTypes={["application/pdf"]} // documents: PDF only
/>

How it behaves:

It overrides, not merges: once provided, it fully replaces the default list and applies to both the file picker accept and upload validation.
You may include types outside the default list, e.g. ["image/svg+xml"] — the values are used as-is.
An empty array is treated as omitted, falling back to the default list.
⚠️ Documents are matched differently: when omitted, validation checks the MIME type or the file extension (some browsers return an empty MIME type); once allowedDocumentMimeTypes is set, it matches the MIME type only — no extension fallback, so pass exact MIME types (e.g. application/pdf).

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

Upload Toggles

Current Configuration

The two upload toggles​

File limits​

Restricting which MIME types can be uploaded​

MIME Type Constraint

Props passed

What gets attached when sending​

Code Example​

Customizing drag-and-drop: useFileDropContext​

See also​