Add beginnings of the directory uploader

svelte/src/directory_upload/DirectoryUploader.svelte

@@ -0,0 +1,52 @@
+<script>
+import { tick } from "svelte";
+
+import FileManager from "../filesystem/filemanager/FileManager.svelte";
+import { fs_create_bucket, fs_get_node } from "../filesystem/FilesystemAPI.svelte";
+
+let fm
+
+let bucket_id = ""
+let bucket_state = null
+let write_password = ""
+
+export const add_files = async files => {
+	if (bucket_id === "") {
+		write_password = gen_password(10)
+
+		try {
+			let bucket = await fs_create_bucket("", "", write_password)
+			bucket_id = bucket.id
+			bucket_state = await fs_get_node(bucket_id, "")
+		} catch (err) {
+			alert("Failed to create bucket! "+err)
+		}
+	}
+
+	await tick()
+	fm.upload(files)
+}
+
+const gen_password = len => {
+	var pw = "";
+	var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+	for ( var i = 0; i < len; i++ ) {
+		pw += chars.charAt(Math.floor(Math.random() * chars.length));
+	}
+	return pw;
+}
+
+const navigate = async e => {
+	try {
+		let new_state = await fs_get_node(bucket_id, e.detail)
+		bucket_state = new_state
+	} catch (err) {
+		alert("Failed to create bucket! "+err)
+	}
+}
+
+</script>
+
+{#if bucket_state !== null }
+	<FileManager bind:this={fm} state={bucket_state} on:navigate={navigate}></FileManager>
+{/if}

svelte/src/directory_upload/Uploader.svelte

@@ -0,0 +1,61 @@
+<script>
+import DirectoryUploader from "./DirectoryUploader.svelte";
+
+let uploader
+
+let file_input_field
+const file_input_change = e => {
+	// Start uploading the files async
+	uploader.add_files(e.target.files)
+
+	// This resets the file input field
+	file_input_field.nodeValue = ""
+}
+let dragging = false
+const drop = e => {
+	dragging = false;
+	if (e.dataTransfer && e.dataTransfer.items.length > 0) {
+		e.preventDefault()
+		e.stopPropagation()
+		uploader.add_files(e.dataTransfer.files)
+	}
+}
+const paste = e => {
+	if (e.clipboardData.files[0]) {
+		e.preventDefault();
+		e.stopPropagation();
+		uploader.add_files(e.clipboardData.files)
+	}
+}
+
+</script>
+
+<svelte:window
+	on:dragover|preventDefault|stopPropagation={() => { dragging = true }}
+	on:dragenter|preventDefault|stopPropagation={() => { dragging = true }}
+	on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
+	on:drop={drop}
+	on:paste={paste} />
+
+<header style="padding-bottom: 50px;">
+	<h1>Directory uploader</h1>
+
+	<section>
+		<div class="highlight_red">
+			Pixeldrain's filesystem feature is still under development. Please
+			don't upload anything you can't afford to lose
+		</div>
+	</section>
+</header>
+
+
+<section>
+
+	<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
+	<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
+		<i class="icon small">cloud_upload</i>
+		<u>U</u>pload Files
+	</button>
+</section>
+
+<DirectoryUploader bind:this={uploader}></DirectoryUploader>