Filesystem fixes

res/template/filesystem.html

@@ -21,7 +21,7 @@
 
 		{{ template "opengraph" .OGData }}
 		<script>
-			const initialNode = {{.Other}};
+			window.initial_node = {{.Other}};
 			window.api_endpoint = '{{.APIEndpoint}}';
 		</script>
 

svelte/src/filesystem/Filesystem.svelte

@@ -38,9 +38,10 @@ let download_frame
 
 // State
 let state = {
-	bucket: initialNode.bucket,
-	parents: initialNode.parents,
-	base: initialNode.base,
+	bucket: window.initial_node.bucket,
+	parents: window.initial_node.parents,
+	base: window.initial_node.base,
+	children: window.initial_node.children,
 
 	// These are used to navigate forward and backward within a directory (using
 	// the previous and next buttons on the toolbar). The cached siblings will
@@ -53,16 +54,16 @@ let state = {
 
 	// Root path of the bucket. Used for navigation by prepending it to a file
 	// path
-	path_root: "/d/"+initialNode.bucket.id,
+	path_root: "/d/"+window.initial_node.bucket.id,
 	loading: true,
 	viewer_type: "",
 	shuffle: false,
 }
 
 // Tallys
-$: total_directories = state.base.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
-$: total_files = state.base.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
-$: total_file_size = state.base.children.reduce((acc, cur) => acc + cur.file_size, 0)
+$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
+$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
+$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
 
 const sort_children = children => {
 	children.sort((a, b) => {
@@ -86,7 +87,7 @@ const navigate = (path, pushHist) => {
 		}
 
 		// Sort directory children
-		sort_children(resp.base.children)
+		sort_children(resp.children)
 
 		open_node(resp)
 	}).catch(err => {
@@ -104,13 +105,14 @@ const open_node = (node) => {
 		console.debug("Current parent path and new node path match. Saving siblings")
 
 		state.siblings_path = node.parents[node.parents.length-1].path
-		state.siblings = state.base.children
+		state.siblings = state.children
 	}
 
 	// Update shared state
 	state.bucket = node.bucket
 	state.parents = node.parents
 	state.base = node.base
+	state.children = node.children
 
 	// Update the viewer area with the right viewer type
 	if (state.base.type === "bucket" || state.base.type === "dir") {
@@ -141,7 +143,7 @@ const open_node = (node) => {
 	// Remove spinner
 	state.loading = false
 }
-onMount(() => open_node(initialNode))
+onMount(() => open_node(window.initial_node))
 
 // Opens a sibling of the currently open file. The offset is relative to the
 // file which is currently open. Give a positive number to move forward and a
@@ -280,12 +282,12 @@ const share = () => {
 		</a>
 		<div class="file_viewer_headerbar_title">
 			{#each state.parents as parent}
-			<a
-				href={state.path_root+parent.path}
-				class="breadcrumb breadcrumb_button"
-				on:click|preventDefault={() => {navigate(parent.path, true)}}>
-				{parent.name}
-			</a> /
+				<a
+					href={state.path_root+parent.path}
+					class="breadcrumb breadcrumb_button"
+					on:click|preventDefault={() => {navigate(parent.path, true)}}>
+					{parent.name}
+				</a> /
 			{/each}
 			<div class="breadcrumb breadcrumb_last">{state.base.name}</div>
 		</div>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -17,9 +17,9 @@ const node_click = (index) => {
 	// We prefix our custom state properties with fm_ to not interfere with
 	// other modules
 	if (mode === "viewing") {
-		dispatch("navigate", state.base.children[index].path)
+		dispatch("navigate", state.children[index].path)
 	} else if (mode === "selecting") {
-		state.base.children[index].fm_selected = !state.base.children[index].fm_selected
+		state.children[index].fm_selected = !state.children[index].fm_selected
 	}
 }
 const navigate_up = () => {
@@ -69,7 +69,7 @@ const delete_selected = () => {
 		return
 	}
 
-	let count = state.base.children.reduce((acc, cur) => {
+	let count = state.children.reduce((acc, cur) => {
 		if (cur.fm_selected) {
 			acc++
 		}
@@ -88,7 +88,7 @@ const delete_selected = () => {
 
 	// Save all promises with deletion requests in an array
 	let promises = []
-	state.base.children.forEach(child => {
+	state.children.forEach(child => {
 		if (!child.fm_selected) { return }
 		promises.push(fs_delete_node(state.bucket.id, child.path))
 	})
@@ -108,9 +108,9 @@ const toggle_select = () => {
 	}
 
 	// Unmark all the selected files and return to viewing mode
-	state.base.children.forEach((child, i) => {
+	state.children.forEach((child, i) => {
 		if (child.fm_selected) {
-			state.base.children[i].fm_selected = false
+			state.children[i].fm_selected = false
 		}
 	})
 	mode = "viewing"
@@ -156,7 +156,7 @@ const toggle_select = () => {
 			<br/>
 		{/if}
 
-		<FileUploader bind:this={uploader} bucket_id={state.bucket.id} target_dir={state.base.path} on:finished={reload}></FileUploader>
+		<FileUploader bind:this={uploader} bucket_id={state.bucket.id} target_dir={state.base.path} on:reload={reload}></FileUploader>
 
 		<div class="directory">
 			<tr>
@@ -169,7 +169,7 @@ const toggle_select = () => {
 				<CreateDirectory state={state} on:done={() => {reload(); creating_dir = false;}} on:loading></CreateDirectory>
 			{/if}
 
-			{#each state.base.children as child, index}
+			{#each state.children as child, index (child.path)}
 				<a
 					href={state.path_root+child.path}
 					on:click|preventDefault={() => {node_click(index)}}

svelte/src/filesystem/filemanager/FileUploader.svelte

@@ -8,6 +8,7 @@ export let target_dir;
 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
@@ -35,10 +36,6 @@ export const upload = (file_list) => {
 	}
 };
 
-const uploads_finished = () => {
-	dispatch("finished");
-};
-
 const upload_file = () => {
 	let job = null;
 	for (let i = 0; i < upload_jobs.length; i++) {
@@ -62,7 +59,7 @@ const upload_file = () => {
 		upload_threads--;
 
 		if (upload_threads === 0) {
-			uploads_finished();
+			dispatch("reload");
 		}
 		return;
 	}
@@ -100,6 +97,13 @@ const upload_file = () => {
 		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;