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 />

web/src/routes/photos/+page.svelte

@@ -9,7 +9,7 @@
 
 	import type { PageData } from './$types';
 
-	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
 		assetInteractionStore,
 		isMultiSelectStoreState,
@@ -26,6 +26,7 @@
 		NotificationType
 	} from '$lib/components/shared-components/notification/notification';
 	import { assetStore } from '$lib/stores/assets.store';
+	import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 
 	export let data: PageData;
 
@@ -100,12 +101,8 @@
 		const album = event.detail.album;
 
 		const assetIds = Array.from($selectedAssets).map((asset) => asset.id);
-		api.albumApi.addAssetsToAlbum(album.id, { assetIds }).then(({ data: dto }) => {
-			notificationController.show({
-				message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
-				type: NotificationType.Info
-			});
 
+		addAssetsToAlbum(album.id, assetIds).then(() => {
 			assetInteractionStore.clearMultiselect();
 		});
 	};
@@ -137,10 +134,7 @@
 			</svelte:fragment>
 		</ControlAppBar>
 	{:else}
-		<NavigationBar
-			user={data.user}
-			on:uploadClicked={() => openFileUploadDialog(UploadType.GENERAL)}
-		/>
+		<NavigationBar user={data.user} on:uploadClicked={() => openFileUploadDialog()} />
 	{/if}
 
 	{#if isShowAddMenu}