mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-20 00:21:15 +01:00
File upload progress and Makefile commands.
Implemented file upload progress to the frontend using XMLHttpRequests, since fetch() doesn't offer this functionality right now. Bit of a fragmented approach to requests in the codebase right now, but hope to resolve this soon. Not styled at all either. Also added some nifty commands to the Makefile for producing smaller binaries using some compiler flags and upx, and requires upx to be installed (make small and make small_pi).
This commit is contained in:
parent
a765d52e4b
commit
58128a0e98
8
Makefile
8
Makefile
|
@ -6,5 +6,13 @@ build:
|
||||||
pi:
|
pi:
|
||||||
env GOOS=linux GOARCH=arm GOARM=5 go build
|
env GOOS=linux GOARCH=arm GOARM=5 go build
|
||||||
|
|
||||||
|
small:
|
||||||
|
go build -ldflags="-s -w"
|
||||||
|
upx --brute nas
|
||||||
|
|
||||||
|
small_pi:
|
||||||
|
env GOOS=linux GOARCH=arm GOARM=5 go build -ldflags="-s -w"
|
||||||
|
upx --brute nas
|
||||||
|
|
||||||
run:
|
run:
|
||||||
go run webserver.go
|
go run webserver.go
|
|
@ -3,6 +3,7 @@ window.addEventListener("hashchange", router, false);
|
||||||
router()
|
router()
|
||||||
let input = ""
|
let input = ""
|
||||||
|
|
||||||
|
// Fetch file listing for a provider and optional path.
|
||||||
function getFileListing(provider, path = "") {
|
function getFileListing(provider, path = "") {
|
||||||
fetch(`/api/files/${provider}${path}`)
|
fetch(`/api/files/${provider}${path}`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
@ -14,6 +15,7 @@ function getFileListing(provider, path = "") {
|
||||||
<form action="#" method="post">
|
<form action="#" method="post">
|
||||||
<input type="file" id="file" data-dir="${provider}${path}"><label for="file">Upload</label>
|
<input type="file" id="file" data-dir="${provider}${path}"><label for="file">Upload</label>
|
||||||
</form>
|
</form>
|
||||||
|
<progress id="progress" value="0" max="100" hidden=""></progress>
|
||||||
<div class="grid-sm">
|
<div class="grid-sm">
|
||||||
${files.map(file =>
|
${files.map(file =>
|
||||||
`<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}/${path !== "" ? path.replace("/","") + "/" : ""}${file.Name}`}">
|
`<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}/${path !== "" ? path.replace("/","") + "/" : ""}${file.Name}`}">
|
||||||
|
@ -23,12 +25,13 @@ function getFileListing(provider, path = "") {
|
||||||
).join('')}
|
).join('')}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
// Register our new listeners for uploading files.
|
||||||
input = document.getElementById("file")
|
input = document.getElementById("file")
|
||||||
input.addEventListener("change", onSelectFile, false)
|
input.addEventListener("change", onSelectFile, false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fetch list of providers and render.
|
||||||
function getProviders() {
|
function getProviders() {
|
||||||
fetch(`/api/providers`)
|
fetch(`/api/providers`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
@ -49,6 +52,7 @@ function getProviders() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dumb router function for passing around values from the hash.
|
||||||
function router(event = null) {
|
function router(event = null) {
|
||||||
let hash = location.hash.replace("#", "")
|
let hash = location.hash.replace("#", "")
|
||||||
// If hash is empty, "redirect" to index.
|
// If hash is empty, "redirect" to index.
|
||||||
|
@ -63,20 +67,34 @@ function router(event = null) {
|
||||||
getFileListing(provider, "/" + path)
|
getFileListing(provider, "/" + path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// File upload functions. Uses XMLHttpRequest so we can display file upload progress.
|
||||||
function onSelectFile() {
|
function onSelectFile() {
|
||||||
upload(input.getAttribute("data-dir"), input.files[0])
|
upload(input.getAttribute("data-dir"), input.files[0])
|
||||||
}
|
}
|
||||||
function upload(path, file) {
|
function upload(path, file) {
|
||||||
|
let xhrObj = new XMLHttpRequest()
|
||||||
let formData = new FormData()
|
let formData = new FormData()
|
||||||
formData.append("file", file)
|
formData.append("file", file)
|
||||||
fetch(`/api/files/${path}`, {
|
|
||||||
method: "POST",
|
xhrObj.upload.addEventListener("loadstart", uploadStarted, false)
|
||||||
body: formData
|
xhrObj.upload.addEventListener("progress", uploadProgress, false)
|
||||||
}).then(response => response.text())
|
xhrObj.upload.addEventListener("load", uploadFinish, false)
|
||||||
.then(text => console.log(text))
|
xhrObj.open("POST", `/api/files/${path}`, true)
|
||||||
.then(router())
|
|
||||||
|
xhrObj.send(formData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function uploadStarted(e) {
|
||||||
|
document.getElementById("progress").hidden = false
|
||||||
|
}
|
||||||
|
function uploadProgress(e) {
|
||||||
|
let progressBar = document.getElementById("progress")
|
||||||
|
progressBar.max = e.total
|
||||||
|
progressBar.value = e.loaded
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadFinish(e) { router() }
|
||||||
|
|
||||||
// Tagged template function for parsing a string of text as HTML objects
|
// Tagged template function for parsing a string of text as HTML objects
|
||||||
// <3 @innovati for this brilliance.
|
// <3 @innovati for this brilliance.
|
||||||
function html(strings, ...things) {
|
function html(strings, ...things) {
|
||||||
|
|
Loading…
Reference in a new issue