feat(web) Add drag n drop upload functionality (#1216)

* Add image drag n drop functionality

* Change upload cover name, background color and opacity

web/src/routes/+layout.svelte

@@ -2,20 +2,24 @@
 	import '../app.css';
 
 	import { fade } from 'svelte/transition';
+	import { page } from '$app/stores';
 	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
 	import AnnouncementBox from '$lib/components/shared-components/announcement-box.svelte';
+	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
 	import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
 	import { onMount } from 'svelte';
 	import { checkAppVersion } from '$lib/utils/check-app-version';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
 	import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
+	import { fileUploadHandler } from '$lib/utils/file-uploader';
 
 	let shouldShowAnnouncement: boolean;
 	let localVersion: string;
 	let remoteVersion: string;
 	let showNavigationLoadingBar = false;
 	let canShow = false;
+	let showUploadCover = false;
 
 	onMount(async () => {
 		checkUserTheme();
@@ -48,9 +52,32 @@
 	afterNavigate(() => {
 		showNavigationLoadingBar = false;
 	});
+
+	const dropHandler = async (event: DragEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		showUploadCover = false;
+
+		const files = event.dataTransfer?.files;
+		if (!files) {
+			return;
+		}
+
+		const filesArray: File[] = Array.from<File>(files);
+		const albumId = ($page.route.id === '/albums/[albumId]' || undefined) && $page.params.albumId;
+
+		await fileUploadHandler(filesArray, albumId);
+	};
+
+	// Required to prevent default browser behavior
+	const dragOverHandler = (event: DragEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
 </script>
 
-<main>
+<main on:dragenter={() => (showUploadCover = true)} class="fixed inset-0 w-full h-full">
 	{#if canShow}
 		<div in:fade={{ duration: 100 }}>
 			{#if showNavigationLoadingBar}
@@ -59,6 +86,14 @@
 
 			<slot />
 
+			{#if showUploadCover}
+				<UploadCover
+					{dropHandler}
+					{dragOverHandler}
+					dragLeaveHandler={() => (showUploadCover = false)}
+				/>
+			{/if}
+
 			<DownloadPanel />
 			<UploadPanel />
 			<NotificationList />