Fix(web): drag n drop shared link (#3030)

* add event to trigger uploadhandler

* add dragndrop store
to handle upload in album-viewer and individuel-shared-viewer
(only on shares)

* fix handleUploadAssets no parameter

* fix format

web/src/lib/components/album-page/album-viewer.svelte

@@ -2,9 +2,10 @@
 	import { browser } from '$app/environment';
 	import { afterNavigate, goto } from '$app/navigation';
 	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 	import { downloadAssets } from '$lib/stores/download';
 	import { locale } from '$lib/stores/preferences.store';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
 		AlbumResponseDto,
 		AssetResponseDto,
@@ -80,6 +81,13 @@
 	$: isPublicShared = sharedLink;
 	$: isOwned = currentUser?.id == album.ownerId;
 
+	dragAndDropFilesStore.subscribe((value) => {
+		if (value.isDragging && value.files.length > 0) {
+			fileUploadHandler(value.files, album.id, sharedLink?.key);
+			dragAndDropFilesStore.set({ isDragging: false, files: [] });
+		}
+	});
+
 	let multiSelectAsset: Set<AssetResponseDto> = new Set();
 	$: isMultiSelectionMode = multiSelectAsset.size > 0;
 

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { bulkDownload } from '$lib/utils/asset-utils';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
 	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
 	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
@@ -14,6 +15,7 @@
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
 	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
+
 	import {
 		notificationController,
 		NotificationType
@@ -28,14 +30,25 @@
 	$: assets = sharedLink.assets;
 	$: isMultiSelectionMode = selectedAssets.size > 0;
 
+	dragAndDropFilesStore.subscribe((value) => {
+		if (value.isDragging && value.files.length > 0) {
+			handleUploadAssets(value.files);
+			dragAndDropFilesStore.set({ isDragging: false, files: [] });
+		}
+	});
+
 	const downloadAssets = async () => {
 		await bulkDownload('immich-shared', assets, undefined, sharedLink.key);
 	};
 
-	const handleUploadAssets = async () => {
+	const handleUploadAssets = async (files: File[] = []) => {
 		try {
-			const results = await openFileUploadDialog(undefined, sharedLink.key);
-
+			let results: (string | undefined)[] = [];
+			if (!files || files.length === 0 || !Array.isArray(files)) {
+				results = await openFileUploadDialog(undefined, sharedLink.key);
+			} else {
+				results = await fileUploadHandler(files, undefined, sharedLink.key);
+			}
 			const { data } = await api.sharedLinkApi.addSharedLinkAssets({
 				id: sharedLink.id,
 				assetIdsDto: {
@@ -94,7 +107,7 @@
 				{#if sharedLink?.allowUpload}
 					<CircleIconButton
 						title="Add Photos"
-						on:click={handleUploadAssets}
+						on:click={() => handleUploadAssets()}
 						logo={FileImagePlusOutline}
 					/>
 				{/if}

web/src/lib/stores/drag-and-drop-files.store.ts

@@ -0,0 +1,7 @@
+//store to track the state of the drag and drop and the files
+import { writable } from 'svelte/store';
+
+export const dragAndDropFilesStore = writable({
+	isDragging: false as boolean,
+	files: [] as File[]
+});

web/src/routes/(user)/share/[key]/+page.svelte

@@ -5,7 +5,6 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-
 	const { sharedLink } = data;
 
 	let album: AlbumResponseDto | null = null;

web/src/routes/+layout.svelte

@@ -15,8 +15,11 @@
 	import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
 	import FaviconHeader from '$lib/components/shared-components/favicon-header.svelte';
 
+	import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+
 	let showNavigationLoadingBar = false;
 	export let data: LayoutData;
+	let albumId: string | undefined;
 
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
@@ -33,10 +36,14 @@
 		}
 
 		const filesArray: File[] = Array.from<File>(files);
-		const albumId =
-			($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
+		albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
 
-		await fileUploadHandler(filesArray, albumId);
+		const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
+		if (isShare) {
+			dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
+		} else {
+			await fileUploadHandler(filesArray, albumId);
+		}
 	};
 </script>
 
@@ -76,7 +83,7 @@
 	<NavigationLoadingBar />
 {/if}
 
-<slot />
+<slot {albumId} />
 
 <DownloadPanel />
 <UploadPanel />