mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-20 00:21:15 +01:00
d86ed1233f
Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
// Register our router, and fire it off initially in case user is being linked a dir.
|
|
window.addEventListener("hashchange", router, false);
|
|
router()
|
|
let input = ""
|
|
|
|
function getFileListing(provider, path = "") {
|
|
fetch(`/api/files/${provider}${path}`)
|
|
.then((response) => {
|
|
return response.json()
|
|
})
|
|
.then((data) => {
|
|
let files = data["Files"]
|
|
html`
|
|
<form action="#" method="post">
|
|
<input type="file" id="file" data-dir="${provider}${path}"><label for="file">Upload</label>
|
|
</form>
|
|
<div class="grid-sm">
|
|
${files.map(file =>
|
|
`<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}/${path !== "" ? path.replace("/","") + "/" : ""}${file.Name}`}">
|
|
${file.Name}${file.IsDirectory ? '/' : ''}
|
|
</a>
|
|
`
|
|
).join('')}
|
|
</div>
|
|
`
|
|
|
|
input = document.getElementById("file")
|
|
input.addEventListener("change", onSelectFile, false)
|
|
})
|
|
}
|
|
|
|
function getProviders() {
|
|
fetch(`/api/providers`)
|
|
.then((response) => {
|
|
return response.json()
|
|
})
|
|
.then((data) => {
|
|
let providers = data
|
|
html`
|
|
<div class="grid-lg">
|
|
${providers.map(provider =>
|
|
`<a href=#${provider}>
|
|
${provider}
|
|
</a>
|
|
`
|
|
).join('')}
|
|
</div>
|
|
`
|
|
})
|
|
}
|
|
|
|
function router(event = null) {
|
|
let hash = location.hash.replace("#", "")
|
|
// If hash is empty, "redirect" to index.
|
|
if (hash === "") {
|
|
getProviders()
|
|
return
|
|
}
|
|
|
|
let path = hash.split("/")
|
|
let provider = path.shift()
|
|
path = path.join("/")
|
|
getFileListing(provider, "/" + path)
|
|
}
|
|
|
|
function onSelectFile() {
|
|
upload(input.getAttribute("data-dir"), input.files[0])
|
|
}
|
|
function upload(path, file) {
|
|
let formData = new FormData()
|
|
formData.append("file", file)
|
|
fetch(`/api/files/${path}`, {
|
|
method: "POST",
|
|
body: formData
|
|
}).then(response => response.text())
|
|
.then(text => console.log(text))
|
|
.then(router())
|
|
}
|
|
|
|
// Tagged template function for parsing a string of text as HTML objects
|
|
// <3 @innovati for this brilliance.
|
|
function html(strings, ...things) {
|
|
// Our "body", where we'll render stuff.
|
|
const body = document.getElementById("main")
|
|
let x = document.createRange().createContextualFragment(
|
|
strings.reduce(
|
|
(markup, string, index) => {
|
|
markup += string
|
|
|
|
if (things[index]) {
|
|
markup += things[index]
|
|
}
|
|
|
|
return markup
|
|
},
|
|
''
|
|
)
|
|
)
|
|
body.innerHTML = ""
|
|
body.append(x)
|
|
} |