File input

<Fileupload
   bind:files
 />
{#each files as file}<p>{file.name}</p>{/each}

<script lang="ts">
	import { Fileupload, Helper } from 'svelte-5-ui-lib';
	let selectedFiles: FileList | undefined = $state();
	let fileNames = $derived(
		selectedFiles
			? Array.from(selectedFiles)
					.map((file) => file.name)
					.join(', ')
			: 'No files selected'
	);
</script>

<Fileupload clearable bind:files={selectedFiles} multiple />

<Helper color="emerald" class="mt-2">Selected files: {fileNames}</Helper>

<script lang="ts">
	import { Dropzone } from 'svelte-5-ui-lib';

	let value = $state<string[]>([]);

	const dropHandle = (event: DragEvent) => {
		if (event.dataTransfer?.items) {
			const newFiles = Array.from(event.dataTransfer.items)
				.filter((item) => item.kind === 'file')
				.map((item) => item.getAsFile())
				.filter((file): file is File => file !== null)
				.map((file) => file.name);
			value = [...value, ...newFiles];
			console.log('Dropped files:', value); // Debugging
		} else if (event.dataTransfer?.files) {
			const newFiles = Array.from(event.dataTransfer.files).map((file) => file.name);
			value = [...value, ...newFiles];
			console.log('Dropped files:', value); // Debugging
		}
	};

	const handleChange = (event: Event) => {
		console.log('onChange event triggered!'); // Check if the event is firing
		const target = event.target as HTMLInputElement;
		const files = target.files;
		console.log('Files in input:', files); // Check if files are being captured

		if (files) {
			const newFiles = Array.from(files).map((file) => file.name);
			console.log('Selected file names:', newFiles); // Log file names
			value = [...value, ...newFiles]; // Update your state with file names
		}
	};

	const showFiles = (files: string[]): string => {
		if (files.length === 1) return files[0];
		let concat = files.join(', ');
		if (concat.length > 40) {
			concat = concat.slice(0, 40) + '...';
		}
		return concat;
	};
</script>

<Dropzone multiple id="dropzone" ondrop={dropHandle} onchange={handleChange}>
	<svg
		aria-hidden="true"
		class="mb-3 h-10 w-10 text-gray-400"
		fill="none"
		stroke="currentColor"
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
		><path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="2"
			d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
		/></svg
	>
	{#if value.length === 0}
		<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
			<span class="font-semibold">Click to upload</span>
		</p>
		<p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
	{:else}
		<p>{showFiles(value)}</p>
	{/if}
</Dropzone>