File uploads

static/js/node.mjs

@@ -75,6 +75,8 @@ export class NodeUI extends Component {
 				<div class="node-name">${node.Name}</div>
 				<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
 			` : html``}
+
+			<${NodeFiles} node=${this.node.value} />
 		`
 	}//}}}
 	componentDidMount() {//{{{
@@ -212,6 +214,39 @@ class NodeContent extends Component {
 }
 
 class NodeFiles extends Component {
+	render({ node }) {//{{{
+		if(node.Files === null || node.Files.length == 0)
+			return
+
+		let files = node.Files
+			.sort((a, b)=>{
+				if(a.Filename.toUpperCase() < b.Filename.toUpperCase()) return -1
+				if(a.Filename.toUpperCase() > b.Filename.toUpperCase()) return  1
+				return 0
+			})
+			.map(file=>
+				html`
+					<div class="filename">${file.Filename}</div>
+					<div class="size">${this.formatSize(file.Size)}</div>
+				`
+			)
+
+		return html`
+			<div id="file-section">
+				<div class="header">Files</div>
+				<div class="files">
+					${files}
+				</div>
+			</div>
+		`
+	}//}}}
+	formatSize(size) {//{{{
+		if(size < 1048576) {
+			return `${Math.round(size / 1024)} KiB`
+		} else {
+			return `${Math.round(size / 1048576)} MiB`
+		}
+	}//}}}
 }
 
 class Node {
@@ -224,6 +259,7 @@ class Node {
 		this.Content  = ''
 		this.Children = []
 		this.Crumbs   = []
+		this.Files    = []
 	}//}}}
 	retrieve(callback) {//{{{
 		this.app.request('/node/retrieve', { ID: this.ID })
@@ -234,6 +270,7 @@ class Node {
 			this.Content  = res.Node.Content
 			this.Children = res.Node.Children
 			this.Crumbs   = res.Node.Crumbs
+			this.Files    = res.Node.Files
 			callback(this)
 		})
 		.catch(this.app.responseError)
@@ -294,8 +331,8 @@ class Menu extends Component {
 	}//}}}
 }
 class UploadUI extends Component {
-	constructor() {//{{{
-		super()
+	constructor(props) {//{{{
+		super(props)
 		this.file = createRef()
 		this.filelist = signal([])
 		this.fileRefs = []
@@ -339,9 +376,14 @@ class UploadUI extends Component {
 				progress=>{
 					this.progressRefs[i].current.innerHTML = `${progress}%`
 				},
-				()=>{
+				res=>{
+					this.props.nodeui.node.value.Files.push(res.File)
+					this.props.nodeui.forceUpdate()
+
 					this.fileRefs[i].current.classList.add("done")
 					this.progressRefs[i].current.classList.add("done")
+
+					this.props.nodeui.upload.value = false
 				})
 		}
 	}//}}}
@@ -368,7 +410,7 @@ class UploadUI extends Component {
 				return
 			}
 
-			doneCallback()
+			doneCallback(response)
 		})
 
 		request.upload.addEventListener('progress', evt=>{