ComposerAttachmentMenu

ComposerAttachmentMenu is the default file picker for Composer. It opens the attachment menu and forwards selected files to the parent Composer draft.

Usage

Replace the picker through attachmentMenuComponent. The inputProps contract contains the file-input state and change handler owned by Composer.

import {
  Composer,
  ComposerAttachmentMenu,
  type ComposerAttachmentMenuProps,
} from '@hyperflow/chakra-ui'

function ProjectAttachmentMenu(props: ComposerAttachmentMenuProps) {
  return <ComposerAttachmentMenu {...props} />
}

export function ProjectComposer() {
  return <Composer attachmentMenuComponent={ProjectAttachmentMenu} />
}

Examples

Add a custom trigger

Keep inputProps on the native input when replacing the visual trigger or menu. Its onChange handler adds selected files to the Composer draft.

function ProjectAttachmentMenu({ inputProps }: ComposerAttachmentMenuProps) {
  return (
    <>
      <input type="file" multiple hidden {...inputProps} />
      <button type="button" disabled={inputProps.disabled}>
        Attach a file
      </button>
    </>
  )
}

Guide

Keep the supplied input contract

Forward disabled and onChange from inputProps. They keep file selection synchronized with the Composer draft.

Do not upload independently

The menu selects files; Composer owns the pending attachment list and submission lifecycle. Avoid creating a separate upload state in this component.

Pair it with the attachment preview

Use ComposerAttachmentPreview in a custom Composer layout so users can inspect and remove selected files.

Props

Related components

• Composer
• ComposerAttachmentPreview
• ComposerTextInput