Allow drag-and-drop uploading in album viewer

svelte/src/util/upload_widget/DropUpload.svelte

@@ -14,10 +14,10 @@ const drop = (e) => {
 	}
 }
 const paste = (e) => {
-	if (e.clipboardData.files[0]) {
+	if (e.clipboardData.files.length !== 0) {
 		e.preventDefault();
 		e.stopPropagation();
-		dispatch("upload", e.dataTransfer.files)
+		dispatch("upload", e.clipboardData.files)
 	}
 }
 </script>
@@ -39,8 +39,6 @@ const paste = (e) => {
 <style>
 .drag_target {
 	position: fixed;
-	height: auto;
-	margin: auto;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);

svelte/src/util/upload_widget/UploadProgress.svelte

@@ -1,5 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte";
+    import { fade } from "svelte/transition";
 import ProgressBar from "../ProgressBar.svelte";
 import { upload_file } from "./UploadFunc";
 
@@ -43,7 +44,7 @@ export const start = () => {
 
 </script>
 
-<div class="upload_progress" class:error={job.status === "error"}>
+<div class="upload_progress" transition:fade={{duration: 200}} class:error={job.status === "error"}>
 	{job.name}<br/>
 	{#if error_code !== ""}
 		{error_message}<br/>

svelte/src/util/upload_widget/UploadWidget.svelte

@@ -1,5 +1,6 @@
 <script>
 import { createEventDispatcher, tick } from "svelte";
+import { fade } from "svelte/transition";
 import DropUpload from "./DropUpload.svelte";
 import UploadProgress from "./UploadProgress.svelte";
 let dispatch = createEventDispatcher()
@@ -103,12 +104,8 @@ const finish_upload = (e) => {
 	class="upload_input" type="file" name="file" multiple="multiple"
 />
 
-{#if drop_upload}
-	<DropUpload on:upload={e => upload_files(e.detail)}/>
-{/if}
-
 {#if visible}
-	<div class="upload_widget">
+	<div class="upload_widget" transition:fade={{duration: 200}}>
 		<div class="header">
 			{#if state === "idle"}
 				Waiting for files
@@ -128,10 +125,14 @@ const finish_upload = (e) => {
 	</div>
 {/if}
 
+{#if drop_upload}
+	<DropUpload on:upload={e => upload_files(e.detail)}/>
+{/if}
+
 <style>
 .upload_input {
 	visibility: hidden;
-	position: static;
+	position: fixed;
 	width: 0;
 	height: 0;
 }
@@ -139,16 +140,15 @@ const finish_upload = (e) => {
 	position: fixed;
 	display: flex;
 	flex-direction: column;
-	width: 400px;
-	max-width: 90%;
+	width: 500px;
+	max-width: 80%;
 	height: auto;
-	max-height: 500px;
+	max-height: 50%;
 	right: 20px;
 	bottom: 20px;
 	border-radius: 20px 20px 8px 8px;
-	overflow-x: hidden;
-	overflow-y: auto;
-	box-shadow: 1px 1px 10px -2px var(--shadow_color);
+	overflow: hidden;
+	box-shadow: 1px 1px 8px var(--shadow_color);
 }
 
 .header {
@@ -166,5 +166,7 @@ const finish_upload = (e) => {
 	flex: 1 1 auto;
 	background: var(--body_color);
 	color: var(--body_text_color);
+	overflow-y: auto;
+	text-align: left;
 }
 </style>