mirror of
https://github.com/immich-app/immich
synced 2025-06-09 00:27:58 +00:00
39 lines
1.0 KiB
Svelte
39 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import ImmichLogo from './immich-logo.svelte';
|
|
|
|
export let dropHandler: (event: DragEvent) => void;
|
|
|
|
let dragStartTarget: EventTarget | null = null;
|
|
</script>
|
|
|
|
<svelte:body
|
|
on:dragenter|stopPropagation|preventDefault={(e) => {
|
|
dragStartTarget = e.target;
|
|
}}
|
|
on:dragleave|stopPropagation|preventDefault={(e) => {
|
|
if (dragStartTarget === e.target) {
|
|
dragStartTarget = null;
|
|
}
|
|
}}
|
|
on:drop|stopPropagation|preventDefault={(e) => {
|
|
dragStartTarget = null;
|
|
dropHandler(e);
|
|
}}
|
|
/>
|
|
|
|
{#if dragStartTarget}
|
|
<div
|
|
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"
|
|
transition:fade={{ duration: 250 }}
|
|
on:dragover={(e) => {
|
|
// Prevent browser from opening the dropped file.
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}}
|
|
>
|
|
<ImmichLogo class="animate-bounce w-48 m-16" />
|
|
<div class="text-2xl">Drop files anywhere to upload</div>
|
|
</div>
|
|
{/if}
|