檔案上傳與拖放

兩個上傳開關​

當同時啟用 3 個以上的按鈕（含 enableExport）時，footer 會把它們摺疊成一個「+」選單。

檔案限制​

超過限制的檔案會被擋下並顯示錯誤提示。

限制可上傳的 MIME 類型​

預設會接受上表所有格式。若只想開放部分類型，可傳入 allowedImageMimeTypes（搭配 enableUpload）與 allowedDocumentMimeTypes（搭配 enableDocumentUpload）。下方 demo 為 preview 模式，切換 preset 後打開聊天視窗的附件選單，檔案選擇器只會顯示對應格式：

<Chatbot
  // ...
  enableUpload
  enableDocumentUpload
  allowedImageMimeTypes={["image/png", "image/jpeg"]} // 圖片只開放 PNG / JPEG
  allowedDocumentMimeTypes={["application/pdf"]} // 文件只開放 PDF
/>

行為重點：

• 是「覆蓋」不是「合併」：一旦給值就完全取代預設清單，並同時套用到檔案選擇器的 accept 與上傳驗證。
• 可填預設清單以外的類型，例如 ["image/svg+xml"]，值會原樣使用。
• 空陣列等同未指定，沿用預設清單。
• ⚠️ 文件的判斷方式不同：未指定時，驗證會用「MIME 比對 或 副檔名 fallback」（因應某些瀏覽器回傳空 MIME）；一旦指定 allowedDocumentMimeTypes，就只比對 MIME、不再做副檔名 fallback，請填入精確的 MIME（例如 application/pdf）。

送出訊息時會夾帶什麼​

使用者選檔後，SDK 會立即非同步上傳，並在輸入框上方顯示預覽（圖片縮圖／文件清單）。 送出訊息時，這些資訊會放進 SendMessageParams：

你可以用 onBeforeSendMessage 在送出前讀取或修改這些欄位。

程式範例​

import { Chatbot } from "@asgard-js/react";
 
export function Demo() {
  return (
    <Chatbot
      title="檔案上傳 Demo"
      config={{ botProviderEndpoint: BOT_PROVIDER_ENDPOINT }}
      customChannelId="file-upload-demo"
      enableUpload
      enableDocumentUpload
    />
  );
}

自訂拖放：useFileDropContext​

拖放行為由 <Chatbot> 內建處理：拖曳檔案到視窗上方時會顯示拖放區覆蓋層， 放開後檔案會自動分類成圖片／文件並進入上傳流程。

如果你做了自訂 footer 或想自行接管拖放區，可以用 useFileDropContext：

import { useFileDropContext } from "@asgard-js/react";
 
function CustomDropZone() {
  const {
    droppedFiles,
    isDraggingOver,
    setDroppedFiles,
    setIsDraggingOver,
    clearDroppedFiles,
  } = useFileDropContext();
 
  // isDraggingOver：使用者是否正拖曳檔案到視窗上方
  // droppedFiles：放開後的 File[]
  // setDroppedFiles / clearDroppedFiles：自行注入或清空待處理檔案
  return null;
}

也看看​

• 功能開關 — 一次切換 enableUpload / enableExport / enableDocumentUpload
• 送出前處理 — 在送出前讀取 blobIds / documentNames
• 自訂 Footer — 自己組輸入列時如何接上傳與拖放