File size: 2,567 Bytes
0348c77 9f870c5 0348c77 21b8785 0348c77 21b8785 0348c77 9f870c5 0348c77 27d47b2 3cb3378 27d47b2 74ed6b2 27d47b2 33592b9 27d47b2 74ed6b2 4331e77 0348c77 27d47b2 0348c77 a9e3f88 0348c77 21b8785 a9e3f88 e67ab0e a9e3f88 0348c77 a9e3f88 0348c77 |
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 |
<script lang="ts">
import { requireAuthUser } from "$lib/utils/auth";
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();
async function dropHandle(event: DragEvent) {
event.preventDefault();
if (!requireAuthUser() && 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];
// Tools removed: no settings update for document parser
}
}
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();
}}
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-600/10 text-blue-600 *:pointer-events-none dark:border-blue-600 dark:bg-blue-600/20 dark:text-blue-600'
: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
>
<CarbonImage class="text-xl" />
<p>Drop File to add to chat</p>
</div>
|