Manual server file uploads implemented

static/js/file.mjs

@@ -1,7 +1,7 @@
 import { CustomHTMLElement } from "./lib/custom_html_element.mjs";
 
 export class N2File extends CustomHTMLElement {
-	static {
+	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
@@ -30,24 +30,46 @@ export class N2File extends CustomHTMLElement {
 			<img data-el="image" src="/images/${_VERSION}/file_icons/generic.svg">
 			<div data-el="filename"></div>
 		`
-	}
-	constructor() {
+	}// }}}
+	constructor() {// {{{
 		super(true)
 
 		this.addEventListener('click', event => {
 			event.preventDefault()
 			event.stopPropagation()
 
+			// Download to disk.
+			if (event.shiftKey) {
+				this.downloadToDisk()
+				return
+			}
+
+			// Open in browser.
 			window.open(
 				URL.createObjectURL(this.file),
-				(event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
+				event.ctrlKey ? '_blank' : '_self',
 			)
 		})
 
 		this.render()
-	}
+	}// }}}
+	async downloadToDisk() {// {{{
+		try {
+			const handle = await window.showSaveFilePicker({
+				suggestedName: this.file.name,
+			})
 
-	async render() {
+			const writable = await handle.createWritable()
+			const blobStream = this.file.stream()
+			await blobStream.pipeTo(writable)
+		} catch (err) {
+			if (err.name == 'AbortError')
+				return
+			console.error(err)
+			alert(err.message)
+		}
+	}// }}}
+	async render() {// {{{
 		const src = this.getAttribute('src')
 
 		// N2's db:// URLs are fetched from IndexedDB.
@@ -76,6 +98,6 @@ export class N2File extends CustomHTMLElement {
 			}
 		} else
 			this.elImage.src = src
-	}
+	}// }}}
 }
 customElements.define('n2-file', N2File)