You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-07-07 06:16:05 +02:00
@ -1,39 +1,39 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import ImmichLogo from './immich-logo.svelte';
|
||||
export let dropHandler: (event: DragEvent) => void;
|
||||
import { fade } from 'svelte/transition';
|
||||
import ImmichLogo from './immich-logo.svelte';
|
||||
export let dropHandler: (event: DragEvent) => void;
|
||||
|
||||
let dragStartTarget: EventTarget | null = null;
|
||||
let dragStartTarget: EventTarget | null = null;
|
||||
|
||||
const handleDragEnter = (e: DragEvent) => {
|
||||
dragStartTarget = e.target;
|
||||
};
|
||||
const handleDragEnter = (e: DragEvent) => {
|
||||
dragStartTarget = e.target;
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:dragenter|stopPropagation|preventDefault={handleDragEnter}
|
||||
on:dragleave|stopPropagation|preventDefault={(e) => {
|
||||
if (dragStartTarget === e.target) {
|
||||
dragStartTarget = null;
|
||||
}
|
||||
}}
|
||||
on:drop|stopPropagation|preventDefault={(e) => {
|
||||
dragStartTarget = null;
|
||||
dropHandler(e);
|
||||
}}
|
||||
on:dragenter|stopPropagation|preventDefault={handleDragEnter}
|
||||
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>
|
||||
<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}
|
||||
|
Reference in New Issue
Block a user