Skip to content
LogoLogo

Attachment

Loading...

Overview

Resources

Changelog

Loading...

Source code

Loading...

Storybook

Loading...

Figma

Loading...

Install

yarn add @camp/attachment

Props

PropTypeDefaultDescription
hideDeletebooleanfalse
type"image" | "html" | "csv" | "eml" | "pdf" | "docx" | "xlsx" | "xls"—
title †string—
img *{ url: string; alt: string; }—
handleRemove *() => void—
classNamestring—

Generated from @camp/attachment@5.15.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Variations

Default

The default Attachment component displays file attachments with standard styling and functionality.

import { Attachment } from '@camp/attachment';
 
<Attachment
  title="Sample HTML Document"
  type="html"
  handleRemove={() => {
    console.log('handle remove');
  }}
/>;

In Grid Use

Attachment components can be arranged in a grid layout for displaying multiple attachments efficiently.

import { Attachment } from '@camp/attachment';
 
// Grid layout example
<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(12, fit-content(128px))', //'repeat(auto-fit, minmax(54px, max-content))',
    gap: 8,
  }}
>
  <Attachment
    title="VeryLongTitleToShowEllipsis"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 2"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 3"
    type="image"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 4"
    type="image"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 5"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 6"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 7"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 9"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <Attachment
    title="Attachment 10"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
</div>;

Generate Blob from Input

Attachment can generate blob data from user input, enabling dynamic file creation and management.

import { Attachment } from '@camp/attachment';
import styled from 'styled-components';
 
const StyledAttachment = styled(Attachment)`
  min-width: 120px;
  max-width: 120px;
`;
 
// Generate blob from input example
export const GenerateBlobFromInput = {
  render: () => {
    const [url, setUrl] = (React.useState < string) | (null > null);
 
    return (
      <>
        <h3 style={{ color: 'white' }}>Select image to see image Attachment</h3>
        <input
          type="file"
          accept="image/*"
          onChange={(event) => {
            if (event?.target?.files) {
              const objUrl = URL.createObjectURL(event.target.files[0]);
              setUrl(objUrl);
            }
          }}
        />
        <div
          style={{
            marginTop: 12,
            display: 'flex',
            overflow: 'auto',
            gap: 8,
          }}
        >
          {url && (
            <Attachment
              {...{
                title: 'Attachment 1',
                type: 'image',
                handleRemove: () => {
                  setUrl(null);
                },
              }}
              img={{ url, alt: 'test' }}
            />
          )}
          <StyledAttachment
            title="Attachment 2"
            type="html"
            handleRemove={() => {
              console.log('handle remove');
            }}
          />
        </div>
      </>
    );
  },
};

Production Examples

More states from @camp/attachment's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Csv

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'csv' as const}
  title="Sample CSV Document"
  className="custom-class"
  hideDelete
  handleRemove={handleRemove}
/>

Html

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'html' as const}
  title="Sample HTML Document"
  className="custom-class"
  handleRemove={handleRemove}
/>

Eml

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'eml' as const}
  title="Sample Email Message"
  className="custom-class"
  handleRemove={handleRemove}
/>

Pdf

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'pdf' as const}
  title="Sample PDF Document"
  className="custom-class"
  handleRemove={handleRemove}
/>

Docx

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'docx' as const}
  title="Sample Word Document"
  className="custom-class"
  handleRemove={handleRemove}
/>

Xlsx

import { Attachment } from '@camp/attachment';
 
const handleRemove = () => {
  console.log('handle remove');
};
 
<Attachment
  type={'xlsx' as const}
  title="Sample Excel Document"
  className="custom-class"
  handleRemove={handleRemove}
/>

3 more variations in Storybook

Usage

Best practices

  • Use Attachment for file upload and management interfaces
  • Provide clear visual feedback for file processing states
  • Include appropriate file type validation and size limits
  • Use grid layouts when displaying multiple attachments
  • Implement proper error handling for failed uploads

Content guidelines

✅ DO

* Use descriptive file names that clearly indicate content

🚫 DON’T

* Don't use generic or unclear file names like "document.pdf"

✅ DO

* Provide clear upload instructions and file requirements

🚫 DON’T

* Don't leave users guessing about supported file types or size limits

✅ DO

* Show upload progress and processing status clearly

🚫 DON’T

* Don't leave users wondering if their file is being processed

Accessibility

Keyboard support

  • Tab navigation to focus on attachment components
  • Enter or Space to activate file selection dialogs
  • Escape to close file selection dialogs
  • Arrow keys for navigation within grid layouts

Screen reader support

  • Proper ARIA labels for file input elements
  • Announcements for upload progress and status changes
  • Clear indication of file selection and removal actions
Copyright © 2026 ActiveCampaign