File uploads

This commit is contained in:
Magnus Åhall 2023-06-22 06:52:27 +02:00
parent 5319492760
commit 910a7a15c7
7 changed files with 105 additions and 36 deletions

View file

@ -52,11 +52,11 @@ export class NodeUI extends Component {
let upload = '';
if(this.upload.value)
upload = html`<${UploadUI} app=${this} />`
upload = html`<${UploadUI} nodeui=${this} />`
let menu = '';
if(this.menu.value)
upload = html`<${Menu} app=${this} />`
upload = html`<${Menu} nodeui=${this} />`
return html`
${menu}
@ -234,6 +234,9 @@ class NodeContent extends Component {
}//}}}
}
class NodeFiles extends Component {
}
class Node {
constructor(app, nodeID) {//{{{
this.app = app
@ -261,14 +264,14 @@ class Node {
}
class Menu extends Component {
render({ app }) {//{{{
render({ nodeui }) {//{{{
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 id="blackout" onclick=${()=>nodeui.menu.value = false}></div>
<div id="menu">
<div class="item" onclick=${()=>{ nodeui.renameNode(); nodeui.menu.value = false }}>Rename</div>
<div class="item separator" onclick=${()=>{ nodeui.deleteNode(); nodeui.menu.value = false }}>Delete</div>
<div class="item separator" onclick=${()=>{ nodeui.upload.value = true; nodeui.menu.value = false }}>Upload</div>
<div class="item" onclick=${()=>{ nodeui.logout(); nodeui.menu.value = false }}>Log out</div>
</div>
`
}//}}}
@ -303,6 +306,7 @@ class UploadUI extends Component {
}//}}}
upload() {//{{{
let nodeID = this.props.nodeui.node.value.ID
this.fileRefs = []
this.progressRefs = []
@ -311,17 +315,23 @@ class UploadUI extends Component {
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")
})
this.postFile(
input.files[i],
nodeID,
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) {//{{{
postFile(file, nodeID, progressCallback, doneCallback) {//{{{
var formdata = new FormData()
formdata.append('file', file)
formdata.append('NodeID', nodeID)
var request = new XMLHttpRequest()