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.