From 20730141d572a7d55e38a51f58d9535149d38981 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Mon, 29 May 2023 18:01:23 +0200
Subject: [PATCH] Remove old file uploader

---
 svelte/src/filesystem/Filesystem.svelte       |  11 +-
 .../filesystem/filemanager/FileManager.svelte |  12 +-
 .../filemanager/FileUploader.svelte           | 243 ------------------
 .../filesystem/upload_widget/UploadFunc.js    |   2 +
 .../upload_widget/UploadWidget.svelte         |  17 +-
 .../src/filesystem/viewers/FilePreview.svelte |   1 +
 6 files changed, 23 insertions(+), 263 deletions(-)
 delete mode 100644 svelte/src/filesystem/filemanager/FileUploader.svelte

diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 1882829..7155a20 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -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}/>
 
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 1aa8b06..93607cc 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -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"}
diff --git a/svelte/src/filesystem/filemanager/FileUploader.svelte b/svelte/src/filesystem/filemanager/FileUploader.svelte
deleted file mode 100644
index 7403705..0000000
--- a/svelte/src/filesystem/filemanager/FileUploader.svelte
+++ /dev/null
@@ -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>
diff --git a/svelte/src/filesystem/upload_widget/UploadFunc.js b/svelte/src/filesystem/upload_widget/UploadFunc.js
index bb463a8..1996c40 100644
--- a/svelte/src/filesystem/upload_widget/UploadFunc.js
+++ b/svelte/src/filesystem/upload_widget/UploadFunc.js
@@ -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
diff --git a/svelte/src/filesystem/upload_widget/UploadWidget.svelte b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
index 580213f..561238f 100644
--- a/svelte/src/filesystem/upload_widget/UploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
@@ -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,
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index 22a9611..194f058 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -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/>