Add file importer

res/static/style/layout.css

@@ -14,7 +14,7 @@
 	font-display: block;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
-		url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
+		url(/res/misc/MaterialIcons.woff2) format('truetype');
 }
 
 .icon {
@@ -31,6 +31,7 @@
 	direction: ltr;
 	text-rendering: optimizeLegibility;
 	vertical-align: middle;
+	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }
 
 .icon_unicode {

svelte/src/filesystem/FilesystemAPI.js

@@ -117,3 +117,13 @@ export const fs_timeseries = async (path, start, end, interval = 60) => {
 		)
 	)
 }
+
+export const fs_import = async (parent_dir_path = "", filelist = []) => {
+	const form = new FormData()
+	form.append("action", "import")
+	form.append("files", JSON.stringify(filelist))
+
+	return await fs_check_response(
+		await fetch(fs_path_url(parent_dir_path), { method: "POST", body: form })
+	)
+}

svelte/src/filesystem/filemanager/FileImporter.svelte

@@ -0,0 +1,45 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import FilePicker from "../../file_viewer/FilePicker.svelte";
+import { fs_import } from "../FilesystemAPI";
+
+let dispatch = createEventDispatcher()
+
+export let state
+let file_picker
+
+export const open = () => file_picker.open()
+
+const import_files = async files => {
+	dispatch("loading", true)
+	console.log(files)
+
+	let fileids = []
+
+	files.forEach(file => {
+		fileids.push(file.id)
+	})
+
+	try {
+		await fs_import(state.base.path, fileids)
+	} catch (err) {
+		if (err.message) {
+			alert(err.message)
+		} else {
+			console.error(err)
+			alert(err)
+		}
+		return
+	} finally {
+		dispatch("reload")
+	}
+}
+
+</script>
+
+<FilePicker
+	bind:this={file_picker}
+	on:files={e => {import_files(e.detail)}}
+	multi_select={true}
+	title="Import files from file list">
+</FilePicker>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -5,6 +5,7 @@ import CreateDirectory from './CreateDirectory.svelte'
 import ListView from './ListView.svelte'
 import GalleryView from './GalleryView.svelte'
 import Button from '../../layout/Button.svelte';
+import FileImporter from './FileImporter.svelte';
 let dispatch = createEventDispatcher()
 
 export let fs_navigator
@@ -16,6 +17,7 @@ let uploader
 let mode = "viewing"
 let creating_dir = false
 let show_hidden = false
+let file_importer
 
 $: selected_files = state.children.reduce((acc, file) => {
 	if (file.fm_selected) {
@@ -301,8 +303,13 @@ onMount(() => {
 					<button on:click={() => dispatch("upload_picker")} title="Upload files to this directory">
 						<i class="icon">cloud_upload</i>
 					</button>
+
 					<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
 
+					<button on:click={() => file_importer.open()} title="Import files from list">
+						<i class="icon">move_to_inbox</i>
+					</button>
+
 					<button
 						on:click={selecting_mode}
 						class:button_highlight={mode === "selecting"}
@@ -369,6 +376,13 @@ onMount(() => {
 	{/if}
 </div>
 
+<FileImporter
+	state={state}
+	bind:this={file_importer}
+	on:loading
+	on:reload={() => fs_navigator.reload()}
+/>
+
 <style>
 .container {
 	height: 100%;