Edit Drop Zone

Name

Also known as (comma separated)

Brief definition Area accepting dropped files.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Drag files here" }, { "id": "hint", "type": "text", "label": "Hint", "default": "or choose from your computer" }, { "id": "state", "type": "select", "label": "State", "default": "Idle", "options": [ "Idle", "Dragover" ] }, { "id": "multiple", "type": "toggle", "label": "Allow multiple files", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dropz\" data-state=\"{{state}}\" style=\"--accent:{{accent}};\">\n <span class=\"dropz__icon\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" aria-hidden=\"true\"><path d=\"M13 17V5M8 10l5-5 5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg></span>\n <p class=\"dropz__label\">{{label}}</p>\n <label class=\"dropz__browse\">\n {{hint}}\n <input type=\"file\" class=\"dropz__input\" {{#if multiple}}multiple{{/if}} />\n </label>\n</div>\n<style>\n.dropz { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 28px 20px; border-radius: 12px; box-sizing: border-box; border: 2px dashed #24143040; text-align: center; }\n.dropz[data-state=\"Dragover\"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, #FAF7F2); }\n.dropz__icon { color: #24143077; display: inline-flex; margin-bottom: 8px; }\n.dropz[data-state=\"Dragover\"] .dropz__icon { color: var(--accent); }\n.dropz__label { margin: 0 0 4px; font-weight: 700; }\n.dropz__browse { display: inline-block; font-size: 13px; color: #24143099; text-decoration: underline; cursor: pointer; }\n.dropz__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.dropz__browse:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }\n</style>", "tailwind": "<div class=\"w-[320px] p-[28px_20px] rounded-xl box-border border-2 border-dashed border-[#24143040] text-center font-sans text-sm text-[#241430] bg-[#FAF7F2] dropz-tw\" data-state=\"{{state}}\">\n <span class=\"inline-flex text-[#24143077] mb-2 dropz-tw-icon\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" aria-hidden=\"true\"><path d=\"M13 17V5M8 10l5-5 5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg></span>\n <p class=\"m-0 mb-1 font-bold\">{{label}}</p>\n <label class=\"inline-block text-[13px] text-[#241430]/60 underline cursor-pointer focus-within:outline focus-within:outline-2 focus-within:rounded\" style=\"outline-color:{{accent}}\">\n {{hint}}\n <input type=\"file\" class=\"absolute w-px h-px overflow-hidden\" style=\"clip:rect(0 0 0 0)\" {{#if multiple}}multiple{{/if}} />\n </label>\n</div>\n<style>\n.dropz-tw[data-state=\"Dragover\"] { border-color: {{accent}}; background: color-mix(in srgb, {{accent}} 18%, #FAF7F2); }\n.dropz-tw[data-state=\"Dragover\"] .dropz-tw-icon { color: {{accent}}; }\n</style>", "react": "export function DropZone({\n label = \"{{label}}\",\n hint = \"{{hint}}\",\n state = \"{{state}}\",\n multiple = {{multiple}},\n accent = \"{{accent}}\",\n}) {\n const dragover = state === \"Dragover\";\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: dragover ? `color-mix(in srgb, ${accent} 18%, #FAF7F2)` : \"#FAF7F2\", width: 320, padding: \"28px 20px\", borderRadius: 12, boxSizing: \"border-box\", border: `2px dashed ${dragover ? accent : \"#24143040\"}`, textAlign: \"center\" }}>\n <span style={{ color: dragover ? accent : \"#24143077\", display: \"inline-flex\", marginBottom: 8 }}>\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" aria-hidden=\"true\"><path d=\"M13 17V5M8 10l5-5 5 5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /><path d=\"M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" /></svg>\n </span>\n <p style={{ margin: \"0 0 4px\", fontWeight: 700 }}>{label}</p>\n <label style={{ display: \"inline-block\", fontSize: 13, color: \"#24143099\", textDecoration: \"underline\", cursor: \"pointer\" }}>\n {hint}\n <input type=\"file\" multiple={multiple} style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0 0 0 0)\", whiteSpace: \"nowrap\" }} />\n </label>\n </div>\n );\n}" }