Spaces:
Sleeping
Sleeping
File size: 2,801 Bytes
241ba68 a1a6daf b104edb 241ba68 a1a6daf 241ba68 a1a6daf 241ba68 b104edb 241ba68 cb022e9 e266738 cb022e9 b104edb cb022e9 fd7f926 cb022e9 b104edb 241ba68 cb022e9 241ba68 5ddf84d 241ba68 a1a6daf 5ddf84d 241ba68 5ddf84d a254c1f 241ba68 | 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 | <script lang="ts">
import { createBubbler } from "svelte/legacy";
const bubble = createBubbler();
import { useSettingsStore } from "$lib/stores/settings";
import { documentParserToolId } from "$lib/utils/toolIds";
import CarbonImage from "~icons/carbon/image";
interface Props {
// import EosIconsLoading from "~icons/eos-icons/loading";
files: File[];
mimeTypes?: string[];
onDrag?: boolean;
onDragInner?: boolean;
}
let {
files = $bindable(),
mimeTypes = [],
onDrag = $bindable(false),
onDragInner = $bindable(false),
}: Props = $props();
const settings = useSettingsStore();
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 = [];
}
if (event.dataTransfer.items[0].kind === "file") {
for (let i = 0; i < event.dataTransfer.items.length; i++) {
const file = event.dataTransfer.items[i].getAsFile();
if (file) {
// check if the file matches the mimeTypes
// else abort
if (
!mimeTypes.some((mimeType: string) => {
const [type, subtype] = mimeType.split("/");
const [fileType, fileSubtype] = file.type.split("/");
return (
(type === "*" || type === fileType) &&
(subtype === "*" || subtype === fileSubtype)
);
})
) {
setErrorMsg(
`Some file type not supported. Only allowed: ${mimeTypes.join(
", "
)}. Uploaded document is of type ${file.type}`
);
files = [];
return;
}
// if file is bigger than 10MB abort
if (file.size > 10 * 1024 * 1024) {
setErrorMsg("Some file is too big. (10MB max)");
files = [];
return;
}
// add the file to the files array
files = [...files, file];
settings.instantSet({
tools: [...($settings.tools ?? []), documentParserToolId],
});
}
}
onDrag = false;
}
}
}
function setErrorMsg(errorMsg: string) {
onDrag = false;
alert(errorMsg);
}
</script>
<div
id="dropzone"
role="form"
ondrop={dropHandle}
ondragenter={() => (onDragInner = true)}
ondragleave={() => (onDragInner = false)}
ondragover={(e) => {
e.preventDefault();
bubble("dragover");
}}
class="relative flex h-28 w-full max-w-4xl flex-col items-center justify-center gap-1 rounded-xl border-2 border-dotted {onDragInner
? 'border-blue-200 !bg-blue-500/10 text-blue-600 *:pointer-events-none dark:border-blue-600 dark:bg-blue-500/20 dark:text-blue-500'
: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
>
<CarbonImage class="text-xl" />
<p>Lisa fail vestlusse lohistades</p>
</div>
|