AttachmentField"> AttachmentField

Used for (pre)viewing and organizing a list of attachments.

Features

• Display an array of attachments
• Preview overlay
• Support for following types
  • Images (png, jpeg)
  • Animated images (gif)
  • Video (mp4)
  • Audio (ogg, mp3)
• Upload progress indicator

Getting started

npm install @cmds/attachment-field --save

Prop Types

Property	Type	Required?	Description
id	String	✓	Unique id for the instance of this field
contextId	Context	✓	The appearance will change depending on context in which the field is displayed. Valid options include: recordDetail or recordGridRow or recordGalleryCard or recordListItem
roleId	Role	✓	The behaviour changes based on the role. Valid options include editor or readOnly
attachments	Array	✓	Array of Attachment objects. Learn more
onAttach	Function		Callback invoked whenever one or more files get dropped or selected in the field: ({files: [File]}): void
onRemoveAttachment	Function		Callback invoked whenever an attachment get's removed: ({id: string, file: File}): void
onRenameAttachment	Function		Callback invoked whenever an attachment's filename changes: ({id: string, attachmentId: string, filename: string}): void
onClear	Function		Callback invoked whenever all attachments get removed at once: ({id: string}): void
onSort	Function		Callback invoked whenever one of the attachments get's sorted: ({id: string, attachmentId: string, targetIndex: number}): void

Attachment in upload

{
    filename: "Nature.jpg",
    id: "att8NBBKRa8slSrnB",
    typeId: "image/jpeg",
    uploading: true,
    progress: 70
}

Attachment

{
    filename: "Nature.jpg",
    id: "att8NBBKRa8slSrnB",
    size: 1165273,
    typeId: "image/jpeg",
    url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB",
    uploading: false,
    progress: null,
    thumbnails: {
        large: {
            height: 384,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_large",
            width: 512
        },
        medium: {
            height: 240,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_medium",
            width: 320
        },
        small: {
            height: 27,
            url: "https://cosmos3.s3.amazonaws.com/att8NBBKRa8slSrnB_small",
            width: 36
        }
    }
}

More information

This component is designed and developed as part of Cosmos Design System.