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/lib/components/album-page/album-viewer.svelte

@@ -236,25 +236,6 @@
 		}
 	};
 
-	const assetUploadedToAlbumHandler = async (event: CustomEvent) => {
-		const { assetIds }: { assetIds: string[] } = event.detail;
-		try {
-			const { data } = await api.albumApi.addAssetsToAlbum(album.id, {
-				assetIds: assetIds
-			});
-
-			if (data.album) {
-				album = data.album;
-			}
-		} catch (e) {
-			console.error('Error [assetUploadedToAlbumHandler] ', e);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Error adding asset to album, check console for more details'
-			});
-		}
-	};
-
 	const addUserHandler = async (event: CustomEvent) => {
 		const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
 
@@ -591,10 +572,10 @@
 
 {#if isShowAssetSelection}
 	<AssetSelection
+		albumId={album.id}
 		assetsInAlbum={album.assets}
 		on:go-back={() => (isShowAssetSelection = false)}
 		on:create-album={createAlbumHandler}
-		on:asset-uploaded={assetUploadedToAlbumHandler}
 	/>
 {/if}
 

web/src/lib/components/album-page/asset-selection.svelte

@@ -3,8 +3,7 @@
 	import { quintOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
 	import { AssetResponseDto } from '@api';
-	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
-	import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
 	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 	import AssetGrid from '../photos-page/asset-grid.svelte';
 	import {
@@ -15,50 +14,13 @@
 
 	const dispatch = createEventDispatcher();
 
+	export let albumId: string;
 	export let assetsInAlbum: AssetResponseDto[];
 
-	let uploadAssets: string[] = [];
-	let uploadAssetsCount = 9999;
-
 	onMount(() => {
 		$assetsInAlbumStoreState = assetsInAlbum;
-
-		albumUploadAssetStore.asset.subscribe((uploadedAsset) => {
-			uploadAssets = uploadedAsset;
-		});
-
-		albumUploadAssetStore.count.subscribe((count) => {
-			uploadAssetsCount = count;
-		});
 	});
 
-	/**
-	 * Watch for the uploading event - when the uploaded assets are the same number of the chosen asset
-	 * navigate back and add them to the album
-	 */
-	$: {
-		if (uploadAssets.length == uploadAssetsCount) {
-			// Filter assets that are already in the album
-			const assetIds = uploadAssets.filter(
-				(asset) => !!asset && !assetsInAlbum.some((a) => a.id === asset)
-			);
-
-			// Add the just uploaded assets to the album
-			if (assetIds.length) {
-				dispatch('asset-uploaded', {
-					assetIds
-				});
-			}
-
-			// Clean up states.
-			albumUploadAssetStore.asset.set([]);
-			albumUploadAssetStore.count.set(9999);
-
-			assetInteractionStore.clearMultiselect();
-			dispatch('go-back');
-		}
-	}
-
 	const addSelectedAssets = async () => {
 		dispatch('create-album', {
 			assets: Array.from($selectedAssets)
@@ -88,7 +50,11 @@
 
 		<svelte:fragment slot="trailing">
 			<button
-				on:click={() => openFileUploadDialog(UploadType.ALBUM)}
+				on:click={() =>
+					openFileUploadDialog(albumId, () => {
+						assetInteractionStore.clearMultiselect();
+						dispatch('go-back');
+					})}
 				class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
 			>
 				Select from computer

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -12,7 +12,6 @@
 	import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
 	import {
 		api,
-		AddAssetsResponseDto,
 		AssetResponseDto,
 		AssetTypeEnum,
 		AlbumResponseDto
@@ -23,6 +22,7 @@
 	} from '../shared-components/notification/notification';
 
 	import { assetStore } from '$lib/stores/assets.store';
+	import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 
 	export let asset: AssetResponseDto;
 	$: {
@@ -209,17 +209,6 @@
 		addToSharedAlbum = shared;
 	};
 
-	const showAddNotification = (dto: AddAssetsResponseDto) => {
-		notificationController.show({
-			message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
-			type: NotificationType.Info
-		});
-
-		if (dto.successfullyAdded === 1 && dto.album) {
-			appearsInAlbums = [...appearsInAlbums, dto.album];
-		}
-	};
-
 	const handleAddToNewAlbum = () => {
 		isShowAlbumPicker = false;
 		api.albumApi.createAlbum({ albumName: 'Untitled', assetIds: [asset.id] }).then((response) => {
@@ -232,9 +221,11 @@
 		isShowAlbumPicker = false;
 		const album = event.detail.album;
 
-		api.albumApi
-			.addAssetsToAlbum(album.id, { assetIds: [asset.id] })
-			.then((response) => showAddNotification(response.data));
+		addAssetsToAlbum(album.id, [asset.id]).then((dto) => {
+			if (dto.successfullyAdded === 1 && dto.album) {
+				appearsInAlbums = [...appearsInAlbums, dto.album];
+			}
+		});
 	};
 </script>
 

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let dropHandler: (event: DragEvent) => void;
+	export let dragOverHandler: (event: DragEvent) => void;
+	export let dragLeaveHandler: () => void;
+</script>
+
+<div
+	in:fade={{ duration: 250 }}
+	out:fade={{ duration: 250 }}
+	on:drop={dropHandler}
+	on:dragover={dragOverHandler}
+	on:dragleave={dragLeaveHandler}
+	class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
+>
+	<img
+		src="/immich-logo.svg"
+		alt="immich logo"
+		height="200"
+		width="200"
+		class="animate-bounce pb-16"
+	/>
+	<div class="text-2xl">Drop files anywhere to upload</div>
+</div>