File Uploads

reachat supports attaching files to user messages out of the box. The <ChatInput> component provides the upload UI; the file metadata flows through your onFileUpload handler and is rendered on questions via <MessageFiles>/<MessageFile> with type-aware previews for images, CSVs, and PDFs.

Upload lifecycle

Enabling uploads

Wire an onFileUpload handler on <Chat>:

<Chat
  sessions={sessions}
  activeSessionId={activeId}
  onFileUpload={(file) => uploadToServer(file)}
  onSendMessage={handleSendMessage}
>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatInput />
  </SessionMessagePanel>
</Chat>

Multiple files per message

Set allowMultipleFiles on <ChatInput> to let users attach more than one file before sending. With multi-file enabled, your handler receives an array of Files instead of a single File:

<Chat
  sessions={sessions}
  activeSessionId={activeId}
  onFileUpload={(file) => {
    const files = Array.isArray(file) ? file : [file];
    return Promise.all(files.map(uploadToServer));
  }}
>
  <SessionMessagePanel>
    <SessionMessagesHeader />
    <SessionMessages />
    <ChatInput allowMultipleFiles />
  </SessionMessagePanel>
</Chat>

Restricting file types

Pass an allowedFiles array to limit the file picker to specific MIME types or extensions:

<ChatInput
  allowMultipleFiles
  allowedFiles={["image/*", "application/pdf", "text/csv"]}
/>

Persisting attachments on conversations

Once an upload completes, attach the resulting URL/metadata to the conversation so it’s rendered alongside the question. Each Conversation has a files field of type ConversationFile[]:

const handleSendMessage = async (message: string) => {
  const newConversation = {
    id: Date.now().toString(),
    question: message,
    response: '',
    files: pendingUploads,        // ConversationFile[]
    createdAt: new Date(),
    updatedAt: new Date(),
  };
 
  setSessions(prev => updateSession(prev, activeId, newConversation));
};

File renderers

reachat ships type-aware renderers that the default <MessageFile> picks between based on the file’s type (MIME) field:

All renderers are exported individually if you’d rather compose your own file UI; see the Custom Components guide.

Theming

File chips on questions are themed via messages.message.files.{base, file}. See the theme guide for the full list of tokens.

For more examples and live demos, visit the storybook demos .