2020-03-22 00:18:19 +00:00
|
|
|
// Register our router, and fire it off initially in case user is being linked a dir.
|
|
|
|
window.addEventListener("hashchange", router, false);
|
|
|
|
router()
|
2020-03-30 20:51:26 +01:00
|
|
|
let input = ""
|
2020-03-22 00:18:19 +00:00
|
|
|
|
2020-03-31 01:16:12 +01:00
|
|
|
// Fetch file listing for a provider and optional path.
|
2020-03-22 00:18:19 +00:00
|
|
|
function getFileListing(provider, path = "") {
|
|
|
|
fetch(`/api/files/${provider}${path}`)
|
|
|
|
.then((response) => {
|
|
|
|
return response.json()
|
|
|
|
})
|
|
|
|
.then((data) => {
|
|
|
|
let files = data["Files"]
|
|
|
|
html`
|
2020-03-30 20:51:26 +01:00
|
|
|
<form action="#" method="post">
|
2020-04-03 02:24:18 +01:00
|
|
|
<input type="file" id="file" data-dir="${provider}/${path}"><label for="file">Upload</label>
|
2020-03-30 20:51:26 +01:00
|
|
|
</form>
|
2020-03-31 01:16:12 +01:00
|
|
|
<progress id="progress" value="0" max="100" hidden=""></progress>
|
2020-03-22 00:18:19 +00:00
|
|
|
<div class="grid-sm">
|
|
|
|
${files.map(file =>
|
2020-04-03 02:24:18 +01:00
|
|
|
`<a href="${!file.IsDirectory ? `/api/files/${provider}/${path}/${file.Name}` : `#${provider}${path === "" ? "" : "/" + path}/${file.Name}`}">
|
2020-03-22 00:18:19 +00:00
|
|
|
${file.Name}${file.IsDirectory ? '/' : ''}
|
|
|
|
</a>
|
|
|
|
`
|
|
|
|
).join('')}
|
|
|
|
</div>
|
|
|
|
`
|
2020-03-31 01:16:12 +01:00
|
|
|
// Register our new listeners for uploading files.
|
2020-03-30 20:51:26 +01:00
|
|
|
input = document.getElementById("file")
|
|
|
|
input.addEventListener("change", onSelectFile, false)
|
2020-03-22 00:18:19 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2020-03-31 01:16:12 +01:00
|
|
|
// Fetch list of providers and render.
|
2020-03-22 00:18:19 +00:00
|
|
|
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>
|
|
|
|
`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2020-03-31 01:16:12 +01:00
|
|
|
// Dumb router function for passing around values from the hash.
|
2020-03-22 00:18:19 +00:00
|
|
|
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()
|
2020-03-22 21:15:31 +00:00
|
|
|
path = path.join("/")
|
2020-04-03 02:24:18 +01:00
|
|
|
getFileListing(provider, path)
|
2020-03-22 00:18:19 +00:00
|
|
|
}
|
|
|
|
|
2020-03-31 01:16:12 +01:00
|
|
|
// File upload functions. Uses XMLHttpRequest so we can display file upload progress.
|
2020-03-30 20:51:26 +01:00
|
|
|
function onSelectFile() {
|
|
|
|
upload(input.getAttribute("data-dir"), input.files[0])
|
|
|
|
}
|
|
|
|
function upload(path, file) {
|
2020-03-31 01:16:12 +01:00
|
|
|
let xhrObj = new XMLHttpRequest()
|
2020-03-30 20:51:26 +01:00
|
|
|
let formData = new FormData()
|
|
|
|
formData.append("file", file)
|
2020-03-31 01:16:12 +01:00
|
|
|
|
|
|
|
xhrObj.upload.addEventListener("loadstart", uploadStarted, false)
|
|
|
|
xhrObj.upload.addEventListener("progress", uploadProgress, false)
|
|
|
|
xhrObj.upload.addEventListener("load", uploadFinish, false)
|
|
|
|
xhrObj.open("POST", `/api/files/${path}`, true)
|
|
|
|
|
|
|
|
xhrObj.send(formData);
|
2020-03-30 20:51:26 +01:00
|
|
|
}
|
|
|
|
|
2020-03-31 01:16:12 +01:00
|
|
|
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() }
|
|
|
|
|
2020-03-22 00:18:19 +00:00
|
|
|
// 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)
|
|
|
|
}
|