Attachment

Preview and download files shared in a conversation. Open the sample attachment, or add your own files and send them with the composer. Files stay in memory and are cleared when this page reloads.

Attach a file to share it in this conversation.

View code

import { useEffect, useRef, useState } from "react";
import { Attachment } from "@stack/ui/attachment";
import { Composer } from "@stack/ui/composer";
import { Message } from "@stack/ui/message";
import { Thread } from "@stack/ui/thread";

type AttachedFile = {
  id: string;
  src: string;
  name: string;
  type: string;
};

const sample: AttachedFile = {
  id: "sample",
  src: "data:text/plain,Example%20attachment%0AReady%20for%20review.",
  name: "notes.txt",
  type: "text/plain",
};

function FilePreview({
  file,
  onRemove,
}: {
  file: AttachedFile;
  onRemove?: () => void;
}) {
  return (
    <Attachment.Root
      src={file.src}
      name={file.name}
      type={file.type}
      onRemove={onRemove}
    >
      <Attachment.PreviewTrigger />
      <Attachment.Remove />
      <Attachment.PreviewContent>
        <Attachment.Header>
          <Attachment.HeaderContent>
            <Attachment.Title />
            <Attachment.Description />
          </Attachment.HeaderContent>
          <Attachment.Actions>
            <Attachment.Download />
            <Attachment.Close />
          </Attachment.Actions>
        </Attachment.Header>
        <Attachment.Content />
      </Attachment.PreviewContent>
    </Attachment.Root>
  );
}

export default function Example() {
  const [draft, setDraft] = useState<AttachedFile[]>([]);
  const [messages, setMessages] = useState([
    { id: "sample-message", files: [sample] },
  ]);
  const urls = useRef(new Set<string>());
  useEffect(() => {
    const created = urls.current;
    return () => {
      for (const url of created) URL.revokeObjectURL(url);
      created.clear();
    };
  }, []);

  function attach(files: File[]) {
    const added = files.map((file) => {
      const src = URL.createObjectURL(file);
      urls.current.add(src);
      return { id: crypto.randomUUID(), src, name: file.name, type: file.type };
    });
    setDraft((current) => [...current, ...added]);
  }

  function submit() {
    if (!draft.length) return;
    setMessages((current) => [
      ...current,
      { id: crypto.randomUUID(), files: draft },
    ]);
    setDraft([]);
  }

  return (
    <div className="h-96">
      <Thread.Root>
        <Thread.Scroller>
          <Thread.Messages>
            <Thread.Content>
              <Thread.Item messageId="prompt">
                <Message.Root>
                  <Message.Content>
                    <Message.Text
                      parts={[
                        {
                          type: "text",
                          text: "Attach a file to share it in this conversation.",
                        },
                      ]}
                    />
                  </Message.Content>
                </Message.Root>
              </Thread.Item>
              {messages.map((message) => (
                <Thread.Item key={message.id} messageId={message.id}>
                  <Message.Root align="end">
                    <Message.Content>
                      <div className="flex flex-wrap justify-end gap-2">
                        {message.files.map((file) => (
                          <FilePreview key={file.id} file={file} />
                        ))}
                      </div>
                    </Message.Content>
                  </Message.Root>
                </Thread.Item>
              ))}
            </Thread.Content>
          </Thread.Messages>
          <Thread.ScrollButton />
        </Thread.Scroller>
        <Thread.Footer>
          <div className="grid gap-3 pt-4">
            {!!draft.length && (
              <div
                aria-label="Draft attachments"
                className="flex flex-wrap gap-2"
              >
                {draft.map((file) => (
                  <FilePreview
                    key={file.id}
                    file={file}
                    onRemove={() =>
                      setDraft((current) =>
                        current.filter((item) => item.id !== file.id),
                      )
                    }
                  />
                ))}
              </div>
            )}
            <Composer.Root
              value=""
              onChange={() => {}}
              onSubmit={submit}
              onFiles={attach}
              submitState={draft.length ? "ready" : "blocked"}
            >
              <Composer.AttachMenu onFiles={attach}>
                <Composer.AttachFiles />
              </Composer.AttachMenu>
              <Composer.Footer>
                <Composer.Submit label="Send attachments" />
              </Composer.Footer>
            </Composer.Root>
          </div>
        </Thread.Footer>
      </Thread.Root>
    </div>
  );
}

Usage

import { Attachment } from "@stack/ui/attachment";

Pass a URL, filename, and MIME type. The host application owns URL creation and cleanup for local files.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.