@pndr/attachment-field NPM

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
        }
    }
}