pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add acknowledgements

Browse Source
This commit is contained in:
Wim Brand
2020-12-15 16:25:20 +01:00
parent e35e6b0f45
commit 75ca29d06b
10 changed files with 397 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
go.mod
View File

@@ -18,6 +18,6 @@ require (
github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145 github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145
github.com/google/uuid v1.1.1 github.com/google/uuid v1.1.1
github.com/julienschmidt/httprouter v1.3.0 github.com/julienschmidt/httprouter v1.3.0
github.com/microcosm-cc/bluemonday v1.0.3 github.com/microcosm-cc/bluemonday v1.0.4
github.com/russross/blackfriday/v2 v2.0.1 github.com/russross/blackfriday/v2 v2.1.0
) )

43
res/include/md/acknowledgements.md Normal file
View File

@@ -0,0 +1,43 @@
# Acknowledgements
## Software used
* [Go](https://golang.org/)
* [ScyllaDB](https://www.scylladb.com/)
* [CockroachDB](https://www.cockroachlabs.com/)
* [Nginx](https://www.nginx.com/)
* [Ubuntu Server edition](https://ubuntu.com/)
* [Debian](https://www.debian.org/)
## Programming libraries
* [scylladb/gocql](https://github.com/scylladb/gocql)
* [scylladb/gocqlx](https://github.com/scylladb/gocqlx)
* [lib/pq](github.com/lib/pq)
* [jmoiron/sqlx](https://github.com/jmoiron/sqlx)
* [BurntSushi/toml](https://github.com/BurntSushi/toml)
* [julienschmidt/httprouter](https://github.com/julienschmidt/httprouter)
* [gabriel-vasile/mimetype](https://github.com/gabriel-vasile/mimetype)
* [disintegration/imaging](github.com/disintegration/imaging)
* [gorilla/websocket](github.com/gorilla/websocket)
* [shopspring/decimal](github.com/shopspring/decimal)
* [jhillyerd/enmime](github.com/jhillyerd/enmime)
* [russross/blackfriday](https://github.com/russross/blackfriday)
* [microcosm-cc/bluemonday](github.com/microcosm-cc/bluemonday)
### Web framework
* [Svelte](https://svelte.dev/)
## Security work
* 2020-12-06 Security researcher Arian Firoozfar reported a cross-site
scripting vulnerability on the file viewer page. The issue was fixed the
following day.
* 2017-12-04 Security researcher Hangyi reported a cross-site scripting
vulnerability on the file viewer page. The issue was fixed on the 6th.
If you have discovered a security issue in pixeldrain please disclose it
responsibly at [support@pixeldrain.com](mailto:support@pixeldrain.com). We do
not have a bug bounty program.

119
res/include/script/admin.js
View File

@@ -1,32 +1,32 @@
let graphViews = drawGraph(document.getElementById("views_chart"), "Views", "number"); let graphViews = drawGraph(document.getElementById("views_chart"), "Views", "number");
let graphBandwidth = drawGraph(document.getElementById("bandwidth_chart"), "Bandwidth", "bytes"); let graphBandwidth = drawGraph(document.getElementById("bandwidth_chart"), "Bandwidth", "bytes");
let graphTimeout = null; let graphTimeout = null;
function loadGraph(minutes, interval, live){ function loadGraph(minutes, interval, live) {
if (graphTimeout !== null) { clearTimeout(graphTimeout) } if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) { if (live) {
graphTimeout = setTimeout(() => {loadGraph(minutes, interval, true)}, 10000) graphTimeout = setTimeout(() => { loadGraph(minutes, interval, true) }, 10000)
} }
let today = new Date() let today = new Date()
let start = new Date() let start = new Date()
start.setMinutes(start.getMinutes()-minutes) start.setMinutes(start.getMinutes() - minutes)
fetch( fetch(
apiEndpoint+"/admin/files/timeseries" + apiEndpoint + "/admin/files/timeseries" +
"?start="+start.toISOString() + "?start=" + start.toISOString() +
"&end="+today.toISOString() + "&end=" + today.toISOString() +
"&interval="+interval "&interval=" + interval
).then(resp => { ).then(resp => {
if (!resp.ok) { return Promise.reject("Error: "+resp.status);} if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json(); return resp.json();
}).then(resp => { }).then(resp => {
resp.views.timestamps.forEach((val, idx) => { resp.views.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
let dateStr = ("00"+(date.getMonth()+1)).slice(-2); let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
dateStr += "-"+("00"+date.getDate()).slice(-2); dateStr += "-" + ("00" + date.getDate()).slice(-2);
dateStr += " "+("00"+date.getHours()).slice(-2); dateStr += " " + ("00" + date.getHours()).slice(-2);
dateStr += ":"+("00"+date.getMinutes()).slice(-2); dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
resp.views.timestamps[idx] = " "+dateStr+" "; // Poor man's padding resp.views.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
}); });
graphViews.data.labels = resp.views.timestamps; graphViews.data.labels = resp.views.timestamps;
graphViews.data.datasets[0].data = resp.views.amounts; graphViews.data.datasets[0].data = resp.views.amounts;
@@ -44,30 +44,30 @@ function loadGraph(minutes, interval, live){
resp.views.amounts.forEach(e => { total += e; }); resp.views.amounts.forEach(e => { total += e; });
document.getElementById("total_views").innerText = formatThousands(total); document.getElementById("total_views").innerText = formatThousands(total);
}).catch(e => { }).catch(e => {
alert("Error requesting time series: "+e); alert("Error requesting time series: " + e);
}) })
} }
loadGraph(10080, 60, false); loadGraph(10080, 60, false);
function loadGraphDate(start, end, interval){ function loadGraphDate(start, end, interval) {
fetch( fetch(
apiEndpoint+"/admin/files/timeseries" + apiEndpoint + "/admin/files/timeseries" +
"?start="+start.toISOString() + "?start=" + start.toISOString() +
"&end="+end.toISOString() + "&end=" + end.toISOString() +
"&interval="+interval "&interval=" + interval
).then(resp => { ).then(resp => {
if (!resp.ok) { return Promise.reject("Error: "+resp.status);} if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
return resp.json(); return resp.json();
}).then(resp => { }).then(resp => {
resp.views.timestamps.forEach((val, idx) => { resp.views.timestamps.forEach((val, idx) => {
let date = new Date(val); let date = new Date(val);
let dateStr = date.getUTCFullYear() + let dateStr = date.getUTCFullYear() +
"-"+("00"+(date.getUTCMonth()+1)).slice(-2) + "-" + ("00" + (date.getUTCMonth() + 1)).slice(-2) +
"-"+("00"+date.getUTCDate()).slice(-2) + "-" + ("00" + date.getUTCDate()).slice(-2) +
" "+("00"+date.getUTCHours()).slice(-2) + " " + ("00" + date.getUTCHours()).slice(-2) +
":"+("00"+date.getUTCMinutes()).slice(-2); ":" + ("00" + date.getUTCMinutes()).slice(-2);
resp.views.timestamps[idx] = " "+dateStr+" "; // Poor man's padding resp.views.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
}); });
graphViews.data.labels = resp.views.timestamps; graphViews.data.labels = resp.views.timestamps;
graphViews.data.datasets[0].data = resp.views.amounts; graphViews.data.datasets[0].data = resp.views.amounts;
@@ -85,7 +85,7 @@ function loadGraphDate(start, end, interval){
resp.views.amounts.forEach(e => { total += e; }); resp.views.amounts.forEach(e => { total += e; });
document.getElementById("total_views").innerText = formatThousands(total); document.getElementById("total_views").innerText = formatThousands(total);
}).catch(e => { }).catch(e => {
alert("Error requesting time series: "+e); alert("Error requesting time series: " + e);
}) })
} }
@@ -114,19 +114,19 @@ function loadTimespan(span, base) {
loadGraphDate(monday, sunday, 60); loadGraphDate(monday, sunday, 60);
} else if (span === "month") { } else if (span === "month") {
let start = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth(), 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth(), 1));
let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth()+1, 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth() + 1, 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 60); loadGraphDate(start, end, 60);
} else if (span === "quarter") { } else if (span === "quarter") {
let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth()/3.0), 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth() / 3.0), 1));
let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth()/3.0), 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth() / 3.0), 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 1440); loadGraphDate(start, end, 1440);
} else if (span === "year") { } else if (span === "year") {
let start = new Date(Date.UTC(base.getUTCFullYear(), 0, 1)); let start = new Date(Date.UTC(base.getUTCFullYear(), 0, 1));
let end = new Date(Date.UTC(base.getUTCFullYear()+1, 0, 0, 23, 59, 59)); let end = new Date(Date.UTC(base.getUTCFullYear() + 1, 0, 0, 23, 59, 59));
tsStart = start; tsStart = start;
loadGraphDate(start, end, 1440); loadGraphDate(start, end, 1440);
@@ -139,21 +139,21 @@ function loadTimespan(span, base) {
function navigateTimespan(forward) { function navigateTimespan(forward) {
let offYear = 0, offMonth = 0, offDay = 0; let offYear = 0, offMonth = 0, offDay = 0;
switch (tsSpan) { switch (tsSpan) {
case "day": case "day":
offDay = 1; offDay = 1;
break; break;
case "week": case "week":
offDay = 7; offDay = 7;
break; break;
case "month": case "month":
offMonth = 1; offMonth = 1;
break; break;
case "quarter": case "quarter":
offMonth = 3; offMonth = 3;
break; break;
case "year": case "year":
offYear = 1; offYear = 1;
break; break;
} }
if (!forward) { if (!forward) {
@@ -165,9 +165,9 @@ function navigateTimespan(forward) {
loadTimespan( loadTimespan(
tsSpan, tsSpan,
new Date(Date.UTC( new Date(Date.UTC(
tsStart.getUTCFullYear()+offYear, tsStart.getUTCFullYear() + offYear,
tsStart.getUTCMonth()+offMonth, tsStart.getUTCMonth() + offMonth,
tsStart.getUTCDay()+offDay, tsStart.getUTCDay() + offDay,
)) ))
) )
} }
@@ -184,7 +184,7 @@ let lastOrder;
function getStats(order) { function getStats(order) {
lastOrder = order lastOrder = order
fetch(apiEndpoint+"/status").then( fetch(apiEndpoint + "/status").then(
resp => resp.json() resp => resp.json()
).then(resp => { ).then(resp => {
document.getElementById("file_stats_watchers").innerText = resp.stats_watcher_threads; document.getElementById("file_stats_watchers").innerText = resp.stats_watcher_threads;
@@ -210,19 +210,8 @@ function getStats(order) {
last_remote_read_size = resp.remote_read_size; last_remote_read_size = resp.remote_read_size;
let c = document.getElementById("tconnstat_body") document.getElementById("db_time").innerText = printDate(new Date(resp.db_time), true, true, true);
c.innerHTML = "" document.getElementById("db_latency").innerText = formatNumber(resp.db_latency / 1000, 3) + " ms";
resp.db_connection_stats.forEach(v => {
let row = document.createElement("tr")
row.innerHTML = `\
<td>${v.name}</td>
<td>${v.available}</td>
<td>${v.max_connections}</td>
<td>${v.open_connections}</td>
<td>${v.connections_in_use}</td>
<td>${v.connections_idle}</td>`
c.appendChild(row)
})
let p = document.getElementById("tbody_peers") let p = document.getElementById("tbody_peers")
p.innerHTML = "" p.innerHTML = ""
@@ -237,7 +226,7 @@ function getStats(order) {
<td>${formatDataVolume(v.free_space, 3)}</td> <td>${formatDataVolume(v.free_space, 3)}</td>
<td>${formatDataVolume(v.min_free_space, 3)}</td>` <td>${formatDataVolume(v.min_free_space, 3)}</td>`
if (v.free_space < v.min_free_space/2 || !v.reachable) { if (v.free_space < v.min_free_space / 2 || !v.reachable) {
row.classList.add("highlight_red") row.classList.add("highlight_red")
} else if (v.free_space < v.min_free_space) { } else if (v.free_space < v.min_free_space) {
row.classList.add("highlight_blue") row.classList.add("highlight_blue")
@@ -248,7 +237,7 @@ function getStats(order) {
}) })
resp.query_statistics.sort((a, b) => { resp.query_statistics.sort((a, b) => {
if (typeof(a[order]) === "number") { if (typeof (a[order]) === "number") {
// Sort ints from high to low // Sort ints from high to low
return b[order] - a[order] return b[order] - a[order]
} else { } else {
@@ -279,4 +268,4 @@ function getStats(order) {
} }
getStats("calls") getStats("calls")
setInterval(() => { getStats(lastOrder) }, 5000) setInterval(() => { getStats(lastOrder) }, 5000)

7
res/include/style/layout.css
View File

@@ -24,6 +24,7 @@
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: block;
src: local('Material Icons'), src: local('Material Icons'),
local('MaterialIcons-Regular'), local('MaterialIcons-Regular'),
url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'), url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
@@ -95,7 +96,7 @@ body{
position: fixed; position: fixed;
backface-visibility: hidden; backface-visibility: hidden;
z-index: 99; z-index: 99;
width: 250px; width: 18em;
height: 100%; height: 100%;
left: 0; left: 0;
float: left; float: left;
@@ -115,7 +116,7 @@ body{
z-index: 200; z-index: 200;
right: 0; right: 0;
height: auto; height: auto;
left: 250px; left: 18em;
min-width: 300px; min-width: 300px;
display: inline-block; display: inline-block;
text-align: center; /* Center the header and body */ text-align: center; /* Center the header and body */
@@ -127,7 +128,7 @@ body{
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.page_navigation { .page_navigation {
left: -250px; left: -18em;
} }
.page_body { .page_body {
left: 0; left: 0;

21
res/template/admin.html
View File

@@ -15,8 +15,7 @@
<h3>Bandwidth and views</h3> <h3>Bandwidth and views</h3>
</div> </div>
<div class="highlight_dark"> <div class="highlight_dark">
<button onclick="loadGraph(720, 1, true);">Live</button> <button onclick="loadGraph(1440, 1, true);">Day</button>
<button onclick="loadGraph(1440, 10, true);">Day</button>
<button onclick="loadGraph(10080, 10, false);">Week</button> <button onclick="loadGraph(10080, 10, false);">Week</button>
<button onclick="loadGraph(20160, 60, false);">Two Weeks</button> <button onclick="loadGraph(20160, 60, false);">Two Weeks</button>
<button onclick="loadGraph(43200, 60, false);">Month</button> <button onclick="loadGraph(43200, 60, false);">Month</button>
@@ -52,19 +51,13 @@
<br/> <br/>
<div class="limit_width"> <div class="limit_width">
<h3>Database connection statistics</h3>
<table> <table>
<thead> <tr>
<tr> <td>DB Time</td>
<td>Name</td> <td id="db_time"></td>
<td>Available</td> <td>DB Latency</td>
<td>Max</td> <td id="db_latency"></td>
<td>Open</td> </tr>
<td>In use</td>
<td>Idle</td>
</tr>
</thead>
<tbody id="tconnstat_body"></tbody>
</table> </table>
<h3>Pixelstore peers</h3> <h3>Pixelstore peers</h3>
<table> <table>

4
res/template/fragments/page_wrap.html
View File

@@ -15,9 +15,9 @@
{{end}} {{end}}
<hr /> <hr />
<a href="/about">About</a> <a href="/about">About</a>
<!--<a href="/technology">Technology</a>-->
<a href="/api">API</a>
<a href="/appearance">Appearance</a> <a href="/appearance">Appearance</a>
<a href="/api">API</a>
<a href="/acknowledgements">Acknowledgements</a>
</div> </div>
<script> <script>
function toggleMenu() { function toggleMenu() {

2
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -269,7 +269,7 @@ const toggle_select = () => {
} }
.directory :global(.node_icon) { .directory :global(.node_icon) {
height: 32px; height: 32px;
width: auto; width: 32px;
vertical-align: middle; vertical-align: middle;
} }
.directory :global(.node_name) { .directory :global(.node_name) {

387
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -1,210 +1,237 @@
<script> <script>
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher() let dispatch = createEventDispatcher();
export let bucket_id export let bucket_id;
export let target_dir export let target_dir;
let upload_jobs = [] let upload_jobs = [];
let upload_threads = 0 let upload_threads = 0;
let max_upload_threads = 4 let max_upload_threads = 3;
// Adds files to the upload queue. The file_list parameter needs to be of type // Adds files to the upload queue. The file_list parameter needs to be of type
// FileList. Upload will also create the necessary directories to place nested // FileList. Upload will also create the necessary directories to place nested
// files in. // files in.
export const upload = (file_list) => { export const upload = (file_list) => {
for (let i = 0; i < file_list.length; i++) { for (let i = 0; i < file_list.length; i++) {
upload_jobs.push({ upload_jobs.push({
file: file_list[i], file: file_list[i],
progress: 0, progress: 0,
target_dir: target_dir.valueOf(), target_dir: target_dir.valueOf(),
uploading: false, uploading: false,
finished: false, finished: false,
tries: 0, tries: 0,
}) });
}
// This updates the UI
upload_jobs = upload_jobs
while (upload_threads < max_upload_threads) {
upload_threads++
setTimeout(upload_file, 1)
}
}
const uploads_finished = () => {
dispatch("finished")
}
const upload_file = () => {
let job = null
for (let i = 0; i < upload_jobs.length; i++) {
// If a file is done we remove it from the array
if (upload_jobs[i].progress >= 1) {
upload_jobs.splice(i, 1)
continue
} }
if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) { // This updates the UI
job = upload_jobs[i] upload_jobs = upload_jobs;
job.uploading = true
upload_jobs = upload_jobs while (upload_threads < max_upload_threads) {
break upload_threads++;
setTimeout(upload_file, 1);
} }
}
if (job === null) {
upload_threads--
if (upload_threads === 0) {
uploads_finished()
}
return
}
console.log(job)
let form = new FormData();
form.append("type", "file")
form.append("file", job.file)
let xhr = new XMLHttpRequest();
xhr.open(
"POST",
"/api/filesystem/"+bucket_id+encodeURIComponent(
job.target_dir+"/"+job.file.name,
),
true,
);
xhr.timeout = 21600000; // 6 hours, to account for slow connections
// Report progress updates back to the caller
xhr.upload.addEventListener("progress", evt => {
if (evt.lengthComputable) {
job.progress = evt.loaded / evt.total
upload_jobs = upload_jobs
}
});
xhr.onreadystatechange = () => {
// readystate 4 means the upload is done
if (xhr.readyState !== 4) { return; }
if (xhr.status >= 100 && xhr.status < 400) {
// Request is a success
// Finish the upload job
job.uploading = false
job.finished = true
upload_file()
} else if (xhr.status >= 400) {
// Request failed
console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
let resp = JSON.parse(xhr.response);
if (job.tries === 3) { // Upload failed
return
} else { // Try again
job.tries++;
job.uploading = false
job.finished = false
}
// Sleep the upload thread for 5 seconds
setTimeout(upload_file, 5000);
} else {
// Request did not arrive
if (job.tries === 3) { // Upload failed
alert("upload failed "+xhr.responseText)
job.uploading = false
job.finished = false
} else { // Try again
job.tries++;
}
// Sleep the upload thread for 5 seconds
setTimeout(upload_file, 5000);
}
upload_jobs = upload_jobs
}; };
xhr.send(form);
}
// File input dialog handling const uploads_finished = () => {
let file_input dispatch("finished");
export const picker = () => { file_input.click() } };
const file_input_change = e => {
upload(e.target.files)
file_input.nodeValue = ""
}
// Drag and drop upload const upload_file = () => {
let hidden = true let job = null;
const dragover = e => { hidden = false } for (let i = 0; i < upload_jobs.length; i++) {
const dragleave = e => { hidden = true } // If a file is done we remove it from the array
const drop = e => { if (upload_jobs[i].progress >= 1) {
hidden = true upload_jobs.splice(i, 1);
upload(e.dataTransfer.files) continue;
} }
const paste = e => {
if (e.clipboardData.files[0]) {
e.preventDefault()
e.stopPropagation()
console.log(e.clipboardData.files[0].getAsFile())
}
}
if (
upload_jobs[i].uploading === false &&
upload_jobs[i].finished === false
) {
job = upload_jobs[i];
job.uploading = true;
upload_jobs = upload_jobs;
break;
}
}
if (job === null) {
upload_threads--;
if (upload_threads === 0) {
uploads_finished();
}
return;
}
console.log(job);
let form = new FormData();
form.append("type", "file");
form.append("file", job.file);
let xhr = new XMLHttpRequest();
xhr.open(
"POST",
"/api/filesystem/" +
bucket_id +
encodeURIComponent(job.target_dir + "/" + job.file.name),
true
);
xhr.timeout = 21600000; // 6 hours, to account for slow connections
// Report progress updates back to the caller
xhr.upload.addEventListener("progress", (evt) => {
if (evt.lengthComputable) {
job.progress = evt.loaded / evt.total;
upload_jobs = upload_jobs;
}
});
xhr.onreadystatechange = () => {
// readystate 4 means the upload is done
if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 100 && xhr.status < 400) {
// Request is a success
// Finish the upload job
job.uploading = false;
job.finished = true;
upload_file();
} else if (xhr.status >= 400) {
// Request failed
console.log(
"Upload error. status: " +
xhr.status +
" response: " +
xhr.response
);
let resp = JSON.parse(xhr.response);
if (job.tries === 3) {
// Upload failed
return;
} else {
// Try again
job.tries++;
job.uploading = false;
job.finished = false;
}
// Sleep the upload thread for 5 seconds
setTimeout(upload_file, 5000);
} else {
// Request did not arrive
if (job.tries === 3) {
// Upload failed
alert("upload failed " + xhr.responseText);
job.uploading = false;
job.finished = false;
} else {
// Try again
job.tries++;
}
// Sleep the upload thread for 5 seconds
setTimeout(upload_file, 5000);
}
upload_jobs = upload_jobs;
};
xhr.send(form);
};
// File input dialog handling
let file_input;
export const picker = () => {
file_input.click();
};
const file_input_change = (e) => {
upload(e.target.files);
file_input.nodeValue = "";
};
// Drag and drop upload
let hidden = true;
const dragover = (e) => {
hidden = false;
};
const dragleave = (e) => {
hidden = true;
};
const drop = (e) => {
hidden = true;
upload(e.dataTransfer.files);
};
const paste = (e) => {
if (e.clipboardData.files[0]) {
e.preventDefault();
e.stopPropagation();
console.log(e.clipboardData.files[0].getAsFile());
}
};
</script> </script>
<style>
.hidden {
display: none;
}
.file_input {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
.file_upload {
display: block;
text-align: left;
width: 100%;
margin: 6px 0 0 0;
padding: 0;
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
}
.upload_progress_bar {
width: 100%;
height: 2px;
}
.upload_progress {
background-color: var(--highlight_color);
height: 100%;
}
</style>
<svelte:body <svelte:body
on:dragover|preventDefault|stopPropagation={dragover} on:dragover|preventDefault|stopPropagation={dragover}
on:dragleave|preventDefault|stopPropagation={dragleave} on:dragleave|preventDefault|stopPropagation={dragleave}
on:drop|preventDefault|stopPropagation={drop} on:drop|preventDefault|stopPropagation={drop}
on:paste={paste} on:paste={paste} />
/>
<div> <div>
<input class="file_input" bind:this={file_input} on:change={file_input_change} type="file" multiple="multiple"/> <input
class="file_input"
bind:this={file_input}
on:change={file_input_change}
type="file"
multiple="multiple" />
<div class:hidden class="highlight_green"> <div class:hidden class="highlight_green">
Drop files here to upload them Drop files here to upload them
</div> </div>
{#each upload_jobs as c} {#each upload_jobs as c}
<div class="file_upload"> <div class="file_upload">
&nbsp;{c.file.name}&nbsp;<br/> &nbsp;{c.file.name}&nbsp;<br />
<div class="upload_progress_bar"> <div class="upload_progress_bar">
<div class="upload_progress" style="width: {c.progress*100}%"></div> <div
class="upload_progress"
style="width: {c.progress * 100}%" />
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
<style>
.hidden {display: none;}
.file_input {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
.file_upload {
display: block;
text-align: left;
width: 100%;
margin: 6px 0 0 0;
padding: 0;
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
}
.upload_progress_bar {
width: 100%;
height: 2px;
}
.upload_progress {
background-color: var(--highlight_color);
height: 100%;
}
</style>

78
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -3,37 +3,81 @@ import { onMount } from "svelte";
import Spinner from "../util/Spinner.svelte"; import Spinner from "../util/Spinner.svelte";
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte"; import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
let loading = true let loading = true;
let buckets = [] let buckets = [];
const get_buckets = async () => { const get_buckets = async () => {
try { try {
let resp = await fs_get_buckets() let resp = await fs_get_buckets();
buckets = resp.buckets buckets = resp.buckets;
} catch (err) { } catch (err) {
alert(err) alert(err);
} finally { } finally {
loading = false loading = false;
} }
};
const expand_bucket = () => {
} }
onMount(get_buckets) onMount(get_buckets);
</script> </script>
<div> <div>
{#if loading} {#if loading}
<div class="spinner_container"><Spinner></Spinner></div> <div class="spinner_container">
<Spinner />
</div>
{/if} {/if}
{#each buckets as bucket} <div class="limit_width">
<a href={"/d/"+bucket.id}>{bucket.name}</a> {#each buckets as bucket}
{/each} <a class="bucket_header" href={'/d/' + bucket.id}>
<div class="bucket_title">{bucket.name}</div>
<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
</a>
<div class="bucket_details">
Hello!
</div>
{/each}
</div>
</div> </div>
<style> <style>
.spinner_container { .spinner_container {
display: inline-block; display: inline-block;
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.bucket_header {
display: flex;
flex-direction: row;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
}
.bucket_header:hover {
box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
color: var(--highlight_color);
text-decoration: none;
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
padding: 0.4em;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
}
</style> </style>

31
webcontroller/web_controller.go
View File

@@ -104,21 +104,22 @@ func New(
handler httprouter.Handle // The function to run when this API is called handler httprouter.Handle // The function to run when this API is called
}{ }{
// General navigation // General navigation
{GET, "" /* */, wc.serveTemplate("home", false)}, {GET, "" /* */, wc.serveTemplate("home", false)},
{GET, "api" /* */, wc.serveMarkdown("apidoc.md", false)}, {GET, "api" /* */, wc.serveMarkdown("apidoc.md", false)},
{GET, "history" /* */, wc.serveTemplate("history_cookies", false)}, {GET, "history" /* */, wc.serveTemplate("history_cookies", false)},
{GET, "u/:id" /* */, wc.serveFileViewer}, {GET, "u/:id" /* */, wc.serveFileViewer},
{GET, "u/:id/preview" /**/, wc.serveFilePreview}, {GET, "u/:id/preview" /* */, wc.serveFilePreview},
{GET, "l/:id" /* */, wc.serveListViewer}, {GET, "l/:id" /* */, wc.serveListViewer},
{GET, "s/:id" /* */, wc.serveSkynetViewer}, {GET, "s/:id" /* */, wc.serveSkynetViewer},
{GET, "t" /* */, wc.serveTemplate("text_editor", false)}, {GET, "t" /* */, wc.serveTemplate("text_editor", false)},
{GET, "donation" /* */, wc.serveMarkdown("donation.md", false)}, {GET, "donation" /* */, wc.serveMarkdown("donation.md", false)},
{GET, "subscribe" /* */, wc.serveMarkdown("subscribe.md", false)}, {GET, "subscribe" /* */, wc.serveMarkdown("subscribe.md", false)},
{GET, "widgets" /* */, wc.serveTemplate("widgets", false)}, {GET, "widgets" /* */, wc.serveTemplate("widgets", false)},
{GET, "about" /* */, wc.serveMarkdown("about.md", false)}, {GET, "about" /* */, wc.serveMarkdown("about.md", false)},
{GET, "appearance" /* */, wc.serveTemplate("appearance", false)}, {GET, "appearance" /* */, wc.serveTemplate("appearance", false)},
{GET, "hosting" /* */, wc.serveMarkdown("hosting.md", false)}, {GET, "hosting" /* */, wc.serveMarkdown("hosting.md", false)},
{GET, "brave" /* */, wc.serveMarkdown("brave.md", false)}, {GET, "brave" /* */, wc.serveMarkdown("brave.md", false)},
{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", false)},
// User account pages // User account pages
{GET, "register" /* */, wc.serveForm(wc.registerForm, false)}, {GET, "register" /* */, wc.serveForm(wc.registerForm, false)},