Spaces:
Paused
Paused
File size: 3,008 Bytes
0e5c445 e0c0b0e 0e5c445 e0c0b0e 0e5c445 e0c0b0e 0e5c445 |
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 108 109 110 111 |
<script lang="ts">
import { onDestroy } from "svelte";
import CarbonImage from "~icons/carbon/image";
// import EosIconsLoading from "~icons/eos-icons/loading";
export let files: File[];
let file_error_message = "";
let errorTimeout: ReturnType<typeof setTimeout>;
export let onDrag = false;
async function dropHandle(event: DragEvent) {
event.preventDefault();
if (event.dataTransfer && event.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
if (files.length > 0) {
files = [];
}
// get only the first file
// optionally: we need to handle multiple files, if we want to support document upload for example
// for multimodal we only support one image at a time but we could support multiple PDFs
if (event.dataTransfer.items[0].kind === "file") {
const file = event.dataTransfer.items[0].getAsFile();
if (file) {
if (!event.dataTransfer.items[0].type.startsWith("image")) {
setErrorMsg("Only images are supported");
files = [];
return;
}
// if image is bigger than 2MB abort
if (file.size > 2 * 1024 * 1024) {
setErrorMsg("Image is too big. (2MB max)");
files = [];
return;
}
files = [file];
onDrag = false;
}
}
}
}
function setErrorMsg(errorMsg: string) {
if (errorTimeout) {
clearTimeout(errorTimeout);
}
file_error_message = errorMsg;
errorTimeout = setTimeout(() => {
file_error_message = "";
onDrag = false;
}, 2000);
}
onDestroy(() => {
if (errorTimeout) {
clearTimeout(errorTimeout);
}
});
</script>
<div
id="dropzone"
role="form"
on:drop={dropHandle}
class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border border-dashed bg-gray-100 focus-within:border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:focus-within:border-gray-500"
>
<div class="object-center">
{#if file_error_message}
<div
class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-2 rounded-xl bg-gray-100 bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50"
>
<p class="text-red-500 dark:text-red-400">{file_error_message}</p>
<div class="h-2.5 w-1/2 rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="animate-progress-bar h-2.5
rounded-full bg-red-500
dark:text-red-400
"
/>
</div>
</div>
{/if}
<div class="mt-3 flex justify-center" class:opacity-0={file_error_message}>
<CarbonImage class="text-xl text-gray-500 dark:text-gray-400" />
</div>
<p
class="mb-3 mt-1.5 text-sm text-gray-500 dark:text-gray-400"
class:opacity-0={file_error_message}
>
Drag and drop <span class="font-semibold">one image</span> here
</p>
</div>
</div>
<style>
@keyframes slideInFromLeft {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.animate-progress-bar {
/* This section calls the slideInFromLeft animation we defined above */
animation: 2s linear 0s 1 slideInFromLeft;
}
</style>
|