src/lib/components/chat/FileDropzone.svelte

<script lang="ts">
	import CarbonImage from "~icons/carbon/image";
	// import EosIconsLoading from "~icons/eos-icons/loading";

	export let files: File[];
	export let mimeTypes: string[] = [];

	export let onDrag = false;
	export let onDragInner = 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 = [];
			}
			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(", ")}`);
							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];
					}
				}
				onDrag = false;
			}
		}
	}

	function setErrorMsg(errorMsg: string) {
		onDrag = false;
		alert(errorMsg);
	}
</script>

<div
	id="dropzone"
	role="form"
	on:drop={dropHandle}
	on:dragenter={() => (onDragInner = true)}
	on:dragleave={() => (onDragInner = false)}
	on:dragover|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-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>Drop File to add to chat</p>
</div>