Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,853 Bytes
b2ecf7d 76d4920 9d298eb b2ecf7d 76d4920 d738fa8 b2ecf7d d738fa8 b2ecf7d 76d4920 b2ecf7d d738fa8 b2ecf7d 76d4920 b2ecf7d d738fa8 b2ecf7d d738fa8 b2ecf7d d738fa8 b2ecf7d 76d4920 b2ecf7d 76d4920 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<script lang="ts">
import LogInPopover from "../../../LogInPopover/LogInPopover.svelte";
import IconSpin from "../../../Icons/IconSpin.svelte";
import { getBlobFromUrl } from "../../shared/helpers.js";
import { isLoggedIn } from "../../stores.js";
import { createEventDispatcher } from "svelte";
export let accept = "image/*";
export let classNames = "";
export let isLoading = false;
export let isDisabled = false;
export let imgSrc = "";
export let label = "Drag image file here or click to browse from your device";
const dispatch = createEventDispatcher<{ run: File | Blob; error: string }>();
let fileInput: HTMLInputElement;
let isDragging = false;
let popOverOpen = false;
function onChange() {
const file = fileInput.files?.[0];
if (file) {
dispatch("run", file);
}
}
async function onDrop(e: DragEvent) {
isDragging = false;
if (!$isLoggedIn) {
popOverOpen = true;
return;
}
const itemList = e.dataTransfer?.items;
if (!itemList || isLoading) {
return;
}
const items = Array.from(itemList);
const uriItem = items.find((x) => x.kind === "string" && x.type === "text/uri-list");
const fileItem = items.find((x) => x.kind === "file");
if (uriItem) {
const url = await new Promise<string>((resolve) => uriItem.getAsString((s) => resolve(s)));
const file = await getBlobFromUrl(url);
dispatch("run", file);
} else if (fileItem) {
const file = fileItem.getAsFile();
if (file) {
dispatch("run", file);
}
} else {
dispatch("error", "Unrecognized dragged and dropped file or element.");
}
}
</script>
<input
{accept}
bind:this={fileInput}
on:change={onChange}
disabled={isLoading || isDisabled}
style="display: none;"
type="file"
/>
<LogInPopover bind:open={popOverOpen}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="relative cursor-pointer rounded border-2 border-dashed px-3 py-7 text-center
{isDisabled ? 'pointer-events-none' : ''}
{isDragging ? 'border-green-300 bg-green-50 text-green-500' : 'text-gray-500'}
{classNames}"
on:click={() => {
if (!$isLoggedIn) {
popOverOpen = true;
return;
}
fileInput.click();
}}
on:dragenter={() => {
isDragging = true;
}}
on:dragleave={() => {
isDragging = false;
}}
on:dragover|preventDefault
on:drop|preventDefault={onDrop}
>
{#if !imgSrc && !isDisabled}
<span class="pointer-events-none text-sm">{label}</span>
{:else}
<div class={isDragging ? "pointer-events-none" : ""}>
<slot />
</div>
{/if}
{#if isLoading}
<div
class="absolute top-1/2 left-1/2 flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full border border-gray-100 bg-white shadow"
>
<IconSpin classNames="text-purple-500 animate-spin h-6 w-6" />
</div>
{/if}
</div>
</LogInPopover>
|