From e3557fd80e43b7a11d206e8afd2654663dffc3a1 Mon Sep 17 00:00:00 2001
From: faupau <paul.paffe@gmx.de>
Date: Thu, 29 Jun 2023 17:26:25 +0200
Subject: [PATCH] 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
---
.../components/album-page/album-viewer.svelte | 10 +++++++-
.../individual-shared-viewer.svelte | 23 +++++++++++++++----
.../lib/stores/drag-and-drop-files.store.ts | 7 ++++++
.../routes/(user)/share/[key]/+page.svelte | 1 -
web/src/routes/+layout.svelte | 15 ++++++++----
5 files changed, 45 insertions(+), 11 deletions(-)
create mode 100644 web/src/lib/stores/drag-and-drop-files.store.ts
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 4d327d322..1183af14d 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/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;
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index a6a50f091..65d0bcea5 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/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}
diff --git a/web/src/lib/stores/drag-and-drop-files.store.ts b/web/src/lib/stores/drag-and-drop-files.store.ts
new file mode 100644
index 000000000..018687f26
--- /dev/null
+++ b/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[]
+});
diff --git a/web/src/routes/(user)/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/+page.svelte
index 554216eff..258fd7120 100644
--- a/web/src/routes/(user)/share/[key]/+page.svelte
+++ b/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;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ea5631658..f817768bf 100644
--- a/web/src/routes/+layout.svelte
+++ b/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 />