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

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

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

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

@@ -1,210 +1,237 @@
<script>
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher();
export let bucket_id
export let target_dir
export let bucket_id;
export let target_dir;
let upload_jobs = []
let upload_threads = 0
let max_upload_threads = 4
let upload_jobs = [];
let upload_threads = 0;
let max_upload_threads = 3;
// 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
// files in.
export const upload = (file_list) => {
for (let i = 0; i < file_list.length; i++) {
upload_jobs.push({
file: file_list[i],
progress: 0,
target_dir: target_dir.valueOf(),
uploading: false,
finished: false,
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
// 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
// files in.
export const upload = (file_list) => {
for (let i = 0; i < file_list.length; i++) {
upload_jobs.push({
file: file_list[i],
progress: 0,
target_dir: target_dir.valueOf(),
uploading: false,
finished: false,
tries: 0,
});
}
if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) {
job = upload_jobs[i]
job.uploading = true
upload_jobs = upload_jobs
break
// This updates the UI
upload_jobs = upload_jobs;
while (upload_threads < max_upload_threads) {
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
let file_input
export const picker = () => { file_input.click() }
const file_input_change = e => {
upload(e.target.files)
file_input.nodeValue = ""
}
const uploads_finished = () => {
dispatch("finished");
};
// 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())
}
}
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
) {
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>
<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
on:dragover|preventDefault|stopPropagation={dragover}
on:dragleave|preventDefault|stopPropagation={dragleave}
on:drop|preventDefault|stopPropagation={drop}
on:paste={paste}
/>
on:paste={paste} />
<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">
Drop files here to upload them
</div>
{#each upload_jobs as c}
<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" style="width: {c.progress*100}%"></div>
<div
class="upload_progress"
style="width: {c.progress * 100}%" />
</div>
</div>
{/each}
</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 { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
let loading = true
let buckets = []
let loading = true;
let buckets = [];
const get_buckets = async () => {
try {
let resp = await fs_get_buckets()
buckets = resp.buckets
let resp = await fs_get_buckets();
buckets = resp.buckets;
} catch (err) {
alert(err)
alert(err);
} finally {
loading = false
loading = false;
}
};
const expand_bucket = () => {
}
onMount(get_buckets)
onMount(get_buckets);
</script>
<div>
{#if loading}
<div class="spinner_container"><Spinner></Spinner></div>
<div class="spinner_container">
<Spinner />
</div>
{/if}
{#each buckets as bucket}
<a href={"/d/"+bucket.id}>{bucket.name}</a>
{/each}
<div class="limit_width">
{#each buckets as bucket}
<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>
<style>
.spinner_container {
display: inline-block;
height: 100px;
width: 100px;
}
.spinner_container {
display: inline-block;
height: 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>