Upload files to IndexedDB

static/js/file.mjs

@@ -0,0 +1,81 @@
+import { CustomHTMLElement } from "./lib/custom_html_element.mjs";
+
+export class N2File extends CustomHTMLElement {
+	static {
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<style>
+				:host {
+					display: inline-grid;
+					grid-template-columns: min-content min-content;
+					align-items: center;
+					white-space: nowrap;
+					cursor: pointer;
+
+					.el-image {
+						max-width: var(--thumbnail-width);
+						max-height: var(--thumbnail-height);
+					}
+
+					.el-filename {
+						display: none;
+						font-weight: bold;
+						background-color: #ddd;
+						border-radius: 4px;
+						padding: 4px 8px;
+						margin-left: 8px;
+					}
+				}
+			</style>
+			<img data-el="image" src="/images/${_VERSION}/file_icons/generic.svg">
+			<div data-el="filename"></div>
+		`
+	}
+	constructor() {
+		super(true)
+
+		this.addEventListener('click', event => {
+			event.preventDefault()
+			event.stopPropagation()
+
+			window.open(
+				URL.createObjectURL(this.file),
+				(event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
+			)
+		})
+
+		this.render()
+	}
+
+	async render() {
+		const src = this.getAttribute('src')
+
+		// N2's db:// URLs are fetched from IndexedDB.
+		if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
+			// image population has to happen asynchronously,
+			// while Marked lib has to be returned a string when exiting this function.
+			// populateImg makes sure this returned img element exists and then populates it
+			// with the image from IndexedDB.
+			const file = await globalThis.nodeStore.files.get(src.slice(5))
+			if (!file)
+				return
+			this.file = file.file
+
+			if (file.file.type.startsWith('image/'))
+				this.elImage.src = URL.createObjectURL(file.file)
+			else {
+				// Check for and use an existing MIME type icon.
+				// Place them in static/images/file_icons/ and replace the slash with an underscore.
+				const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
+				const res = await fetch(url)
+				if (res.ok)
+					this.elImage.src = url
+
+				this.elFilename.innerText = file.file.name
+				this.elFilename.style.display = 'block'
+			}
+		} else
+			this.elImage.src = src
+	}
+}
+customElements.define('n2-file', N2File)