Attachment
File and image attachments with metadata, upload progress, failure states, and actions.
c2-attachment presents a file or image without owning the upload itself. Set status and progress from your uploader, and respond to attachment-remove or attachment-retry to perform the corresponding operation. c2-attachment-group arranges related attachments as a list or responsive grid.
Installation
npm install @c2n/attachmentUsage
Use src for an image thumbnail, or fill the media slot with your own image, video, SVG, or icon. Image previews become tiles automatically while files remain rows. Set layout="row" or layout="tile" to override that choice. The name and metadata slots replace their text regions, while actions replaces all built-in controls.
Without custom media, the component chooses a Phosphor file icon from name and type. It recognizes common archives, documents, spreadsheets, presentations, images, audio, video, and source formats—including file-zip, file-pdf, file-ts, and file-tsx—and falls back to the generic file icon.
The upload states are ready, uploading, complete, and error. Uploading renders an accessible native progress bar; error renders a retry button. Add removable for remove or cancel, and disabled to disable and dim built-in actions.
const attachment = document.querySelector('c2-attachment')
attachment.addEventListener('attachment-remove', event => {
uploader.cancel(event.detail.name)
})
attachment.addEventListener('attachment-retry', event => {
uploader.retry(event.detail.name)
})Set layout="grid" on c2-attachment-group for responsive equal columns. Use layout="mixed" for the reference composition: image tiles fill the columns and ordinary file rows span the entire group. Both layouts use --c2-attachment-group--min-column-width as their minimum card width.