File Upload & Drag-and-Drop

The two upload toggles​

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

File limits​

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:

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

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;
}

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