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

Remove old file uploader

Browse Source
This commit is contained in:
Fornax
2023-05-29 18:01:23 +02:00
parent 34bd15fa8b
commit 20730141d5
6 changed files with 23 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
svelte/src/filesystem/Filesystem.svelte
View File

@@ -14,7 +14,7 @@ import UploadWidget from './upload_widget/UploadWidget.svelte';
let loading = true
let toolbar_visible = (window.innerWidth > 600)
let file_preview
let upload_widget
let download_frame
let details_visible = false
let edit_window
@@ -140,13 +140,13 @@ const loading_evt = e => {
<div class="file_preview checkers" class:toolbar_visible>
{#if view === "file"}
<FilePreview
bind:this={file_preview}
fs_navigator={fs_navigator}
state={state}
edit_window={edit_window}
on:loading={loading_evt}
on:open_sibling={e => fs_navigator.open_sibling(e.detail)}
on:download={download}
on:upload_picker={() => upload_widget.pick_files()}
/>
{:else if view === "search"}
<SearchView
@@ -192,7 +192,12 @@ const loading_evt = e => {
on:loading={loading_evt}
/>
<UploadWidget fs_state={state} drop_upload on:uploads_finished={() => fs_navigator.reload()}/>
<UploadWidget
bind:this={upload_widget}
fs_state={state}
drop_upload
on:uploads_finished={() => fs_navigator.reload()}
/>
<LoadingIndicator loading={loading}/>

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

@@ -2,7 +2,6 @@
import { fs_delete } from './../FilesystemAPI.js'
import { createEventDispatcher, onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import FileUploader from './FileUploader.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
let dispatch = createEventDispatcher()
@@ -145,7 +144,7 @@ onMount(() => {
<div class="toolbar_spacer"></div>
{#if state.permissions.update}
<button on:click={uploader.picker} title="Upload files to this directory">
<button on:click={() => dispatch("upload_picker")} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
</button>
<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir} title="Make folder">
@@ -189,15 +188,6 @@ onMount(() => {
on:loading
/>
{/if}
<FileUploader
bind:this={uploader}
bucket_id={state.root.id}
target_dir={state.base.path}
on:reload={fs_navigator.reload}
write_password={state.write_password}
></FileUploader>
</div>
{#if directory_view === "list"}

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

@@ -1,243 +0,0 @@
<script>
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher();
export let bucket_id;
export let target_dir;
export let write_password = "";
let upload_jobs = [];
let upload_threads = 0;
let max_upload_threads = 3;
let last_reload = 0;
// 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) => {
console.log(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 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) {
dispatch("reload");
}
return;
}
console.log(job);
let url = window.api_endpoint+"/filesystem/"+bucket_id+encodeURIComponent(job.target_dir + "/" + job.file.name)
if (write_password) {
url += "?write_password="+write_password
}
let xhr = new XMLHttpRequest();
xhr.open("PUT", url, 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
let now = new Date().getTime()
if (now - last_reload > 4000) {
// If the last reload was more than 4 seconds ago we do another reload
last_reload = now
dispatch("reload");
}
// 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(job.file);
};
// 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]);
upload(e.clipboardData.files)
}
};
</script>
<svelte:body
on:dragover|preventDefault|stopPropagation={dragover}
on:dragleave|preventDefault|stopPropagation={dragleave}
on:drop|preventDefault|stopPropagation={drop}
on:paste={paste} />
<div>
<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 />
<div class="upload_progress_bar">
<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: inline-block;
text-align: left;
width: 100%;
max-width: 1000px;
margin: 6px 0 0 0;
padding: 0;
background: var(--body_color);
border-radius: 4px;
overflow: hidden;
}
.upload_progress_bar {
width: 100%;
height: 2px;
}
.upload_progress {
background-color: var(--highlight_color);
height: 100%;
}
</style>

2
svelte/src/filesystem/upload_widget/UploadFunc.js
View File

@@ -39,6 +39,8 @@ export const upload_file = async (file, bucket, path, on_progress, on_success, o
return
}
console.log("Uploading file to ", fs_path_url(bucket, path))
let xhr = new XMLHttpRequest();
xhr.open("PUT", fs_path_url(bucket, path), true);
xhr.timeout = 86400000; // 24 hours, to account for slow connections

17
svelte/src/filesystem/upload_widget/UploadWidget.svelte
View File

@@ -24,11 +24,10 @@ let visible = false
let upload_queue = [];
let task_id_counter = 0
export const upload_files = async (files) => {
export const upload_files = async files => {
if (files.length === 0) {
return
}
if (current_dir.type !== "dir") {
}else if (fs_state.base.type !== "dir") {
alert("Can only upload to directory")
return
}
@@ -43,16 +42,22 @@ export const upload_file = async file => {
if (fs_state.base.type !== "dir") {
alert("Can only upload to directory")
return
}
if (file.type === "" && file.size === 0) {
}else if (file.type === "" && file.size === 0) {
return
}
let path = fs_state.base.path + "/"
if (file.webkitRelativePath) {
path += file.webkitRelativePath
} else {
path += file.name
}
upload_queue.push({
task_id: task_id_counter,
file: file,
bucket: fs_state.root.id,
path: fs_state.base.path + "/" + file.webkitRelativePath,
path: path,
component: null,
status: "queued",
total_size: file.size,

1
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -44,6 +44,7 @@ const state_update = async (base) => {
state={state}
edit_window={edit_window}
on:loading
on:upload_picker
/>
{:else if viewer_type === "audio"}
<Audio state={state} on:open_sibling/>