2d:null 2e:["$","title",null,{"children":"Writable FileAttachments | Tom Larkworthy | Observable"}] 33:Tdfc,file_browser = { const byModule = new Map(); for (const a of all_module_files) { if (!byModule.has(a.module)) byModule.set(a.module, []); byModule.get(a.module).push(a); } const fmt = (bytes) => { if (bytes < 1024) return bytes + " B"; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"; return (bytes / (1024 * 1024)).toFixed(1) + " MB"; }; const totalFiles = all_module_files.length; const totalSize = all_module_files.reduce((s, f) => s + f.size, 0); const container = htl.html`

Writable FileAttachments

${totalFiles} files across ${ byModule.size } modules, ${fmt(totalSize)} total

`; for (const [mod, files] of byModule) { const modSize = files.reduce((s, f) => s + f.size, 0); const details = htl.html`

${mod} (${ files.length } file${files.length !== 1 ? "s" : ""}, ${fmt(modSize)})

`; const table = htl.html`

Name	Size	Type	Actions

`; const tbody = table.querySelector("tbody"); for (const f of files) { const tr = htl.html``; tr.appendChild( htl.html`${f.name}` ); tr.appendChild( htl.html`${fmt( f.size )}` ); tr.appendChild( htl.html`

${
          f.mimeType || "\u2014"
        }

` ); const actions = htl.html``; actions.appendChild( htl.html`Download` ); const rm = htl.html``; rm.onclick = () => { if (confirm("Remove " + f.name + "?")) { removeFileAttachment(f.name, f._module); tr.remove(); } }; actions.appendChild(rm); tr.appendChild(actions); tbody.appendChild(tr); } details.appendChild(table); const addRow = htl.html`

`; const fileInput = htl.html``; fileInput.onchange = () => { if (fileInput.files[0]) setFileAttachment(fileInput.files[0], files[0]._module); }; addRow.appendChild( htl.html`Add file: ` ); addRow.appendChild(fileInput); details.appendChild(addRow); container.appendChild(details); } return container; }34:T684,all_module_files = { void attachments; // dependency for reactivity const runtime = main._runtime; const nameMap = new Map(); for (const v of runtime._variables) { if (v._name && typeof v._name === 'string' && v._name.startsWith('module ')) { const modName = v._name.slice(7); const resolvedMod = v._value; if (resolvedMod && resolvedMod._scope) nameMap.set(resolvedMod, modName); } } const builtin = runtime._builtin; const source = m => !m._source ? m : source(m._source); const allMods = new Set(Array.from(runtime._variables, v => source(v._module))); const results = []; for (const mod of allMods) { if (mod === builtin) continue; const FA = mod._builtins.get('FileAttachment'); if (!FA) continue; const map = getFileAttachmentsMap(FA); if (!map || map.size === 0) continue; const name = nameMap.get(mod) || 'main'; for (const [filename, entry] of map) { const url = typeof entry === 'string' ? entry : entry.url; const mimeType = typeof entry === 'object' ? entry.mimeType : null; let size = 0; try { const resp = await fetch(url); const blob = await resp.blob(); size = blob.size; } catch (e) { } results.push({ module: name, name: filename, url, mimeType, size, _module: mod }); } } return results; }35:[] 31:{"id":"09fdee029150048c","slug":"fileattachments","title":"Writable FileAttachments","thumbnail":"5fe92bf6733278dc8ad9a334a39ce9e925a588d807efeec9c86f928b889ea9a7","access_level":"public","create_time":"$D2025-01-21T04:02:09.436Z","update_time":"$D2026-07-25T13:41:01.348Z","view_time":null,"first_public_time":"$D2025-01-21T18:41:29.334Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":462,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"cf72f19f55f3a048","slug":"lopebook","title":"lopecode","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Writable FileAttachments","cells":[{"id":448,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"Attach files to notebooks without uploading them anywhere. Massive files, no problem! Offers programmatic access to the FileAttachments too.\n\n~~~js\nimport {getFileAttachment, setFileAttachment, removeFileAttachment, jsonFileAttachment, createFileAttachment} from '@tomlarkworthy/fileattachments'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"viewof file = Inputs.file({ label: \"add file\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"attach_file = {\n setFileAttachment(file);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"Files are stored in `mutable attachments` as a Map of `filename => FileAttachment` which updates reactively.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"viewof selected = Inputs.select(attachments, { label: \"file attachments\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"The normal FileAttachment API is available so it plays nicely with other features like downloads.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"download_selected = selected &&\n DOM.download(selected.blob(), selected.name, `Download ${selected.name}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"size_bytes = selected && (await selected.arrayBuffer()).byteLength","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof attachments = Inputs.input(getFileAttachments())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"jsonFileAttachment = (name, obj) => {\n const str = JSON.stringify(obj);\n const bytes = new TextEncoder().encode(str);\n const blob = new Blob([bytes], {\n type: \"application/json;charset=utf-8\"\n });\n const url = URL.createObjectURL(blob);\n return createFileAttachment(url, name, \"application/json\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"createFileAttachment = (url, name, mimeType) => {\n const file = new FileAttachmentClass(name, mimeType);\n Object.defineProperty(file, \"url\", { value: () => url });\n return file;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"setFileAttachment = {\n return async function setFileAttachment(file, module = main) {\n file = await file;\n if (!file)\n return;\n let FileAttachment = module._builtins.get('FileAttachment');\n if (!FileAttachment) {\n // dependancies don't have FileAttachment object so lazily create one\n const fileAttachments = new Map();\n FileAttachment = module._runtime.fileAttachments(name => fileAttachments.get(name));\n module.builtin('FileAttachment', FileAttachment);\n }\n const map = getFileAttachmentsMap(FileAttachment);\n const url = typeof file.url === 'function' ? await file.url() : URL.createObjectURL(file);\n map.set(file.name, url);\n viewof attachments.value = getFileAttachments();\n viewof attachments.dispatchEvent(new Event('input'));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"getFileAttachment = (name, module = main) =>\n getFileAttachments(module).get(name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"removeFileAttachment = function (name, module = main) {\n getFileAttachmentsMap(module._builtins.get(\"FileAttachment\")).delete(name);\n viewof attachments.value = getFileAttachments();\n viewof attachments.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"getFileAttachments = function getFileAttachments(module = main) {\n // classic observablehq.com gives each notebook its own FileAttachment in module._builtins;\n // notebook-kit (new.observablehq.com) has one runtime-level builtin keyed by resolved href\n const FA = module._builtins.get(\"FileAttachment\") ?? FileAttachment;\n const files = new Map();\n for (const [key] of getFileAttachmentsMap(FA).entries()) {\n const name = /^[a-z][a-z0-9+.-]*:\\/\\//i.test(key)\n ? decodeURIComponent(key.slice(key.lastIndexOf(\"/\") + 1))\n : key;\n if (name) files.set(name, FA.call(null, key));\n }\n return files;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"getFileAttachmentsMap = (FileAttachment) => {\n let fileMap;\n const backup_get = Map.prototype.get;\n const backup_has = Map.prototype.has;\n const backup_set = Map.prototype.set;\n Map.prototype.has = Map.prototype.get = function (...args) {\n fileMap = this;\n };\n // notebook-kit memoises unknown names, so the probe must not WRITE to the registry\n Map.prototype.set = function () {\n return this;\n };\n try {\n FileAttachment(\"\");\n } catch (e) {}\n Map.prototype.has = backup_has;\n Map.prototype.get = backup_get;\n Map.prototype.set = backup_set;\n return fileMap || new Map();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"FileAttachmentClass = {\n return sampleFileAttachment.__proto__.__proto__.constructor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"viewof fileInput = Inputs.file()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"plainFile = new File([], \"cool\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"sampleFileAttachment = {\n const dataTransfer = new DataTransfer();\n dataTransfer.items.add(plainFile);\n viewof fileInput[0].files = dataTransfer.files;\n viewof fileInput[0].dispatchEvent(new Event(\"input\"));\n return viewof fileInput.value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"import { runtime, main, thisModule } from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"