bind:files on Input component

[DDuran19]

Prerequisites

• This feature already exists in shadcn/ui - if not, it won't be considered here so don't continue with your issue.

Describe the feature

Right now, we are unable to bind files for multiple uploads. Is it possible that we can add this feature too?

Here's my dirty implementation. if this is good, should I make a PR?

<script lang="ts">
	import type { HTMLInputAttributes } from 'svelte/elements';
	import type { WithElementRef } from 'bits-ui';
	import { cn } from '$lib/utils/index.js';

	let {
		ref = $bindable(null),
		value = $bindable(),
		files = $bindable(),
		class: className,
		type,
		...restProps
	}: WithElementRef<HTMLInputAttributes & { files?: FileList }> = $props();
	const defaultClass =
		'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50';
</script>

{#if type === 'file'}
	<input
		bind:this={ref}
		type="file"
		class={cn(defaultClass, className)}
		bind:value
		bind:files
		{...restProps}
	/>
{:else}
	<input bind:this={ref} {type} class={cn(defaultClass, className)} bind:value {...restProps} />
{/if}

[huntabyte]

The issue here is that now files exist on the type even for inputs that aren't of type file. Will need to look into this one further.

[DDuran19]

Thanks hunter!

[ByteAtATime]

Hey, any updates? I don't think Svelte allows for conditional binding, we could possibly just set it to be null by default. Either way, I think this might be a decently important issue.