self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 06:25:41 +02:00
Code Issues Releases Activity

feat(web) Add drag n drop upload functionality (#1216)

Browse Source 
* Add image drag n drop functionality

* Change upload cover name, background color and opacity
This commit is contained in:
Krisjanis Lejejs
2022-12-30 04:07:18 +02:00
committed by GitHub
parent 6736063f83
commit 10b0924cfb
11 changed files with 159 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte Normal file
View File

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