Added file uploads

static/js/app.mjs

@@ -73,7 +73,7 @@ class App extends Component {
 		}
 	}//}}}
 
-	responseError({comm, app}) {//{{{
+	responseError({comm, app, upload}) {//{{{
 		if(comm !== undefined) {
 			comm.text().then(body=>alert(body))
 			return
@@ -87,6 +87,11 @@ class App extends Component {
 		if(app !== undefined) {
 			alert(JSON.stringify(app))
 		}
+
+		if(upload !== undefined) {
+			alert(upload)
+			return
+		}
 	}//}}}
 	async request(url, params) {//{{{
 		return new Promise((resolve, reject)=>{

static/js/node.mjs

@@ -10,6 +10,7 @@ export class NodeUI extends Component {
 		this.tree = signal(null)
 		this.node = signal(null)
 		this.nodeContent = createRef()
+		this.upload = signal(false)
 		window.addEventListener('popstate', evt=>{
 			if(evt.state && evt.state.hasOwnProperty('nodeID'))
 				this.goToNode(evt.state.nodeID, true)
@@ -49,14 +50,17 @@ export class NodeUI extends Component {
 		if(this.props.app.nodeModified.value)
 			modified = 'modified';
 
-		return html`
-			<div id="menu-blackout" class="${this.menu.value ? 'show' : ''}" onclick=${()=>this.menu.value = false}></div>
-			<div id="menu" class="${this.menu.value ? 'show' : ''}">
-				<div class="item" onclick=${()=>this.renameNode()}>Rename</div>
-				<div class="item separator" onclick=${()=>this.deleteNode()}>Delete</div>
-				<div class="item" onclick=${()=>this.logout()}>Log out</div>
-			</div>
+		let upload = '';
+		if(this.upload.value)
+			upload = html`<${UploadUI} app=${this} />`
 
+		let menu = '';
+		if(this.menu.value)
+			upload = html`<${Menu} app=${this} />`
+
+		return html`
+			${menu}
+			${upload}
 			<header class="${modified}" onclick=${()=>this.saveNode()}>
 				<div class="name">Notes</div>
 				<div class="add" onclick=${evt=>this.createNode(evt)}>+</div>
@@ -87,21 +91,19 @@ export class NodeUI extends Component {
 		let handled = true
 		switch(evt.key.toUpperCase()) {
 			case 'S':
-				if(!evt.ctrlKey) {
-					handled = false
-					break
-				}
-				this.saveNode()
+				if(evt.ctrlKey || (evt.shiftKey && evt.altKey))
+					this.saveNode()
 				break
 
 			case 'N':
-				if(!evt.ctrlKey && !evt.AltKey) {
-					handled = false
-					break
-				}
-				this.createNode()
+				if((evt.ctrlKey && evt.AltKey) || (evt.shiftKey && evt.altKey))
+					this.createNode()
 				break
 
+			case 'U':
+				if((evt.ctrlKey && evt.altKey) || (evt.shiftKey && evt.altKey))
+					this.upload.value = true
+
 			default:
 				handled = false
 		}
@@ -135,7 +137,8 @@ export class NodeUI extends Component {
 		})
 	}//}}}
 	createNode(evt) {//{{{
-		evt.stopPropagation()
+		if(evt)
+			evt.stopPropagation()
 		let name = prompt("Name")
 		if(!name)
 			return
@@ -257,4 +260,105 @@ class Node {
 	}//}}}
 }
 
+class Menu extends Component {
+	render({ app }) {//{{{
+		return html`
+			<div id="blackout" onclick=${()=>app.menu.value = false}></div>
+			<div id="menu" class="${app.menu.value ? 'show' : ''}">
+				<div class="item" onclick=${()=>app.renameNode()}>Rename</div>
+				<div class="item separator" onclick=${()=>app.deleteNode()}>Delete</div>
+				<div class="item separator" onclick=${()=>{ app.upload.value = true; app.menu.value = false }}>Upload</div>
+				<div class="item" onclick=${()=>app.logout()}>Log out</div>
+			</div>
+		`
+	}//}}}
+}
+class UploadUI extends Component {
+	constructor() {//{{{
+		super()
+		this.file = createRef()
+		this.filelist = signal([])
+		this.fileRefs = []
+		this.progressRefs = []
+	}//}}}
+	render({ nodeui }) {//{{{
+		let filelist = this.filelist.value
+		let files = []
+		for(let i = 0; i < filelist.length; i++) {
+			files.push(html`<div key=file_${i} ref=${this.fileRefs[i]} class="file">${filelist.item(i).name}</div><div class="progress" ref=${this.progressRefs[i]}></div>`)
+		}
+
+		return html`
+			<div id="blackout" onclick=${()=>nodeui.upload.value = false}></div>
+			<div id="upload">
+				<input type="file" ref=${this.file} onchange=${()=>this.upload()} multiple />
+				<div class="files">
+					${files}
+				</div>
+			</div>
+		`
+	}//}}}
+	componentDidMount() {//{{{
+		this.file.current.focus()
+	}//}}}
+
+	upload() {//{{{
+		this.fileRefs = []
+		this.progressRefs = []
+
+		let input = this.file.current
+		this.filelist.value = input.files
+		for(let i = 0; i < input.files.length; i++) {
+			this.fileRefs.push(createRef())
+			this.progressRefs.push(createRef())
+			this.postFile(input.files[i], progress=>{
+				this.progressRefs[i].current.innerHTML = `${progress}%`
+			}, ()=>{
+				this.fileRefs[i].current.classList.add("done")
+				this.progressRefs[i].current.classList.add("done")
+			})
+		}
+	}//}}}
+	postFile(file, progressCallback, doneCallback) {//{{{
+		var formdata = new FormData()
+		formdata.append('file', file)
+
+		var request = new XMLHttpRequest()
+
+		request.addEventListener("error", ()=>{
+			window._app.current.responseError({ upload: "An unknown error occured" })
+		})
+
+		request.addEventListener("loadend", ()=>{
+			if(request.status != 200) {
+				window._app.current.responseError({ upload: request.statusText })
+				return
+			}
+
+			let response = JSON.parse(request.response)
+			if(!response.OK) {
+				window._app.current.responseError({ upload: response.Error })
+				return
+			}
+
+			doneCallback()
+		})
+
+		request.upload.addEventListener('progress', evt=>{
+			var fileSize = file.size
+
+			if(evt.loaded <= fileSize)
+				progressCallback(Math.round(evt.loaded / fileSize * 100))
+			if(evt.loaded == evt.total)
+				progressCallback(100)
+		})   
+
+		request.open('post', '/node/upload')
+		request.setRequestHeader("X-Session-Id", window._app.current.session.UUID)
+		//request.timeout = 45000
+		request.send(formdata)
+	}//}}}
+}
+
+
 // vim: foldmethod=marker