Added file uploads
This commit is contained in:
Magnus Åhall
parent
73c8adc86a
commit
5319492760
9 changed files with 381 additions and 36 deletions
|
|
@ -24,8 +24,7 @@ h1 {
|
|||
display: grid;
|
||||
color: #fff;
|
||||
}
|
||||
#menu-blackout {
|
||||
display: none;
|
||||
#blackout {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
|
@ -34,9 +33,6 @@ h1 {
|
|||
z-index: 1024;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
#menu-blackout.show {
|
||||
display: initial;
|
||||
}
|
||||
#menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -59,7 +55,7 @@ h1 {
|
|||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
#menu .item.separator {
|
||||
border-bottom: 3px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
#menu .item:hover {
|
||||
background: #ddd;
|
||||
|
|
@ -67,6 +63,54 @@ h1 {
|
|||
#menu .item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
#upload {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 2px solid #000;
|
||||
padding: 16px;
|
||||
z-index: 1025;
|
||||
}
|
||||
#upload input {
|
||||
border: 1px solid #000;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
#upload .files {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
padding-top: 12px;
|
||||
}
|
||||
#upload .files .file {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
#upload .files .file:nth-child(1) {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
#upload .files .file.done {
|
||||
color: #0a0;
|
||||
}
|
||||
#upload .files .progress {
|
||||
justify-self: end;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
padding-left: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
#upload .files .progress:nth-child(2) {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
#upload .files .progress.done {
|
||||
color: #0a0;
|
||||
}
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content min-content;
|
||||
|
|
|
|||
|
|
@ -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)=>{
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@ h1 {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
#menu-blackout {
|
||||
display: none;
|
||||
#blackout {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
|
@ -39,10 +38,6 @@ h1 {
|
|||
bottom: 0px;
|
||||
z-index: 1024;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
|
||||
&.show {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
|
|
@ -68,7 +63,7 @@ h1 {
|
|||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.separator {
|
||||
border-bottom: 3px solid #000;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -81,6 +76,62 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
#upload {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 2px solid #000;
|
||||
padding: 16px;
|
||||
z-index: 1025;
|
||||
|
||||
input {
|
||||
border: 1px solid #000;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.files {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
padding-top: 12px;
|
||||
|
||||
.file {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
&:nth-child(1) {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&.done {
|
||||
color: #0a0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
justify-self: end;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
padding-left: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
&:nth-child(2) {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&.done {
|
||||
color: #0a0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content min-content;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue