Edit Attachment

Name

Also known as (comma separated)

Brief definition File associated with content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "fileName", "type": "text", "label": "File name", "default": "Q3-roadmap.pdf" }, { "id": "fileType", "type": "select", "label": "File type", "default": "pdf", "options": [ "pdf", "image", "spreadsheet", "archive" ] }, { "id": "fileSize", "type": "text", "label": "File size", "default": "2.4 MB" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "removable", "type": "toggle", "label": "Show remove button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"attachment\" data-filetype=\"{{fileType}}\" style=\"--accent:{{accent}};\">\n <span class=\"attachment__icon\" aria-hidden=\"true\"></span>\n <div class=\"attachment__meta\">\n <p class=\"attachment__name\">{{fileName}}</p>\n <p class=\"attachment__size\">{{fileSize}}</p>\n </div>\n {{#if removable}}<button class=\"attachment__remove\" type=\"button\" aria-label=\"Remove attachment\">×</button>{{/if}}\n</div>\n<style>\n.attachment { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 14px; background: #FAF7F2; border: 1px solid #24143020; border-radius: 10px; font: 14px/1.4 system-ui, sans-serif; color: #241430; box-sizing: border-box; }\n.attachment__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); flex-shrink: 0; position: relative; }\n.attachment__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }\n.attachment[data-filetype=\"pdf\"] .attachment__icon::before { content: \"PDF\"; }\n.attachment[data-filetype=\"image\"] .attachment__icon::before { content: \"IMG\"; }\n.attachment[data-filetype=\"spreadsheet\"] .attachment__icon::before { content: \"XLS\"; }\n.attachment[data-filetype=\"archive\"] .attachment__icon::before { content: \"ZIP\"; }\n.attachment__meta { flex: 1; min-width: 0; }\n.attachment__name { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.attachment__size { margin: 0; font-size: 12px; color: #24143080; }\n.attachment__remove { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 4px; border-radius: 6px; }\n.attachment__remove:hover { background: #24143010; }\n.attachment__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "tailwind": "<div data-filetype=\"{{fileType}}\" class=\"attachment-tw flex items-center gap-3 max-w-xs p-3 bg-[#FAF7F2] border border-[#24143020] rounded-lg font-sans text-sm text-[#241430] box-border\" style=\"--accent:{{accent}}\">\n <span class=\"attachment-tw__icon w-9 h-9 rounded-lg flex-shrink-0 relative\" style=\"background:{{accent}}\" aria-hidden=\"true\"></span>\n <div class=\"flex-1 min-w-0\">\n <p class=\"m-0 font-semibold truncate\">{{fileName}}</p>\n <p class=\"m-0 text-xs text-[#241430]/50\">{{fileSize}}</p>\n </div>\n {{#if removable}}<button type=\"button\" aria-label=\"Remove attachment\" class=\"border-0 bg-transparent text-base leading-none cursor-pointer p-1 rounded-md hover:bg-[#24143010]\">×</button>{{/if}}\n</div>\n<style>\n.attachment-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }\n.attachment-tw[data-filetype=\"pdf\"] .attachment-tw__icon::before { content: \"PDF\"; }\n.attachment-tw[data-filetype=\"image\"] .attachment-tw__icon::before { content: \"IMG\"; }\n.attachment-tw[data-filetype=\"spreadsheet\"] .attachment-tw__icon::before { content: \"XLS\"; }\n.attachment-tw[data-filetype=\"archive\"] .attachment-tw__icon::before { content: \"ZIP\"; }\n</style>", "react": "export function Attachment({\n fileName = \"{{fileName}}\",\n fileType = \"{{fileType}}\",\n fileSize = \"{{fileSize}}\",\n accent = \"{{accent}}\",\n removable = {{removable}},\n}) {\n const label = { pdf: \"PDF\", image: \"IMG\", spreadsheet: \"XLS\", archive: \"ZIP\" }[fileType] ?? \"FILE\";\n return (\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, maxWidth: 320, padding: \"12px 14px\", background: \"#FAF7F2\", border: \"1px solid #24143020\", borderRadius: 10, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", boxSizing: \"border-box\" }}>\n <span style={{ width: 36, height: 36, borderRadius: 8, background: accent, flexShrink: 0, display: \"grid\", placeItems: \"center\", color: \"#FAF7F2\", fontSize: 11, fontWeight: 700 }} aria-hidden=\"true\">{label}</span>\n <div style={{ flex: 1, minWidth: 0 }}>\n <p style={{ margin: 0, fontWeight: 600, whiteSpace: \"nowrap\", overflow: \"hidden\", textOverflow: \"ellipsis\" }}>{fileName}</p>\n <p style={{ margin: 0, fontSize: 12, color: \"#24143080\" }}>{fileSize}</p>\n </div>\n {removable && (\n <button type=\"button\" aria-label=\"Remove attachment\" style={{ border: \"none\", background: \"transparent\", fontSize: 16, lineHeight: 1, cursor: \"pointer\", color: \"#241430\", padding: 4, borderRadius: 6 }}>×</button>\n )}\n </div>\n );\n}" }