feat(web): paste photo from clipboard (#8475)

* feat(web): paste photo from clipboard

* listen on svelte:window instead of a div

* refactor: move logic to drag overlay

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -1,28 +1,54 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import ImmichLogo from './immich-logo.svelte';
-  export let dropHandler: (event: DragEvent) => void;
+  import { page } from '$app/stores';
+  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import { fileUploadHandler } from '$lib/utils/file-uploader';
+
+  $: albumId = ($page.route?.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
+  $: isShare = $page.route?.id === '/(user)/share/[key]' || undefined;
 
   let dragStartTarget: EventTarget | null = null;
 
-  const handleDragEnter = (e: DragEvent) => {
+  const onDragEnter = (e: DragEvent) => {
     if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
       dragStartTarget = e.target;
     }
   };
-</script>
 
-<svelte:body
+  const onDragLeave = (e: DragEvent) => {
-  on:dragenter|stopPropagation|preventDefault={handleDragEnter}
-  on:dragleave|stopPropagation|preventDefault={(e) => {
     if (dragStartTarget === e.target) {
       dragStartTarget = null;
     }
-  }}
+  };
-  on:drop|stopPropagation|preventDefault={(e) => {
+
+  const onDrop = async (e: DragEvent) => {
     dragStartTarget = null;
-    dropHandler(e);
+    await handleFiles(e.dataTransfer?.files);
-  }}
+  };
+
+  const onPaste = ({ clipboardData }: ClipboardEvent) => handleFiles(clipboardData?.files);
+
+  const handleFiles = async (files?: FileList) => {
+    if (!files) {
+      return;
+    }
+
+    const filesArray: File[] = Array.from<File>(files);
+    if (isShare) {
+      dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
+    } else {
+      await fileUploadHandler(filesArray, albumId);
+    }
+  };
+</script>
+
+<svelte:window on:paste={onPaste} />
+
+<svelte:body
+  on:dragenter|stopPropagation|preventDefault={onDragEnter}
+  on:dragleave|stopPropagation|preventDefault={onDragLeave}
+  on:drop|stopPropagation|preventDefault={onDrop}
 />
 
 {#if dragStartTarget}

web/src/routes/(user)/+layout.svelte

@@ -1,29 +1,6 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { fileUploadHandler } from '$lib/utils/file-uploader';
-
-  let albumId: string | undefined;
-
-  const dropHandler = async ({ dataTransfer }: DragEvent) => {
-    const files = dataTransfer?.files;
-    if (!files) {
-      return;
-    }
-
-    const filesArray: File[] = Array.from<File>(files);
-    albumId = ($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
-
-    const isShare = $page.route.id === '/(user)/share/[key]' || undefined;
-    if (isShare) {
-      dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
-    } else {
-      await fileUploadHandler(filesArray, albumId);
-    }
-  };
 </script>
 
-<slot {albumId} />
+<slot />
-
+<UploadCover />
-<UploadCover {dropHandler} />

web/src/routes/+layout.svelte

@@ -19,7 +19,6 @@
   import '../app.css';
 
   let showNavigationLoadingBar = false;
-  let albumId: string | undefined;
 
   const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
 
@@ -111,7 +110,7 @@
   </FullscreenContainer>
 </noscript>
 
-<slot {albumId} />
+<slot />
 
 {#if showNavigationLoadingBar}
   <NavigationLoadingBar />