From aeddf1c9d6a70c9ae099784ab61dd8555484a36e Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose@chua.family>
Date: Wed, 17 Nov 2021 11:06:37 +0800
Subject: [PATCH] Add uploader

---
 web/manage/src/App.svelte      |  3 +++
 web/manage/src/Uploader.svelte | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 web/manage/src/Uploader.svelte

diff --git a/web/manage/src/App.svelte b/web/manage/src/App.svelte
index 0e2849c..b62099c 100644
--- a/web/manage/src/App.svelte
+++ b/web/manage/src/App.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { fetcher, request, listPhotos } from './http.js';
 	import Gallery from './Gallery.svelte';
+	import Uploader from './Uploader.svelte';
 
 	async function getMetadataTitle() {
 		const resp = await fetcher(request('GET', 'metadata/title'));
@@ -49,6 +50,8 @@
 		{/await}
 	</header>
 
+	<Uploader />
+
 	{#await photos then photos}
 		<Gallery {photos} />
 	{:catch error}
diff --git a/web/manage/src/Uploader.svelte b/web/manage/src/Uploader.svelte
new file mode 100644
index 0000000..5666fba
--- /dev/null
+++ b/web/manage/src/Uploader.svelte
@@ -0,0 +1,42 @@
+<script>
+	let isdragenter = false;
+
+	function dragenter(event) {
+		isdragenter = true;	
+	}
+	function dragleave(event) {
+		isdragenter = false;
+	}
+	function dragover(event) {
+		// Do nothing
+	}
+	function drop(event) {
+		console.log(event.dataTransfer.items);
+	}
+</script>
+
+<div on:dragenter={dragenter} on:dragleave={dragleave} on:dragover|preventDefault={dragover} on:drop|preventDefault={drop}>
+	<div class="instructions" class:isdragenter>
+		Drop photos here
+	</div>
+</div>
+
+<style>
+	.instructions {
+		margin: calc(var(--spacing) * 2);
+		padding: 1rem;
+
+		border: 2px dashed #000;
+		border-radius: 0.5rem;
+		opacity: 0.333;
+
+		text-align: center;
+		font-weight: 550;
+		pointer-events: none;
+	}
+	.instructions.isdragenter {
+		opacity: 0.666;
+	}
+</style>
+
+<!-- vim: set ft=html: -->