Uploading a file using Input

[HenkBourgonje]

Hi!

I've been switching my project's UI from Skeleton to ShadCN and I'm really liking it so far, good work! I have one question though: how do I bind the uploading of a file to an actual FileList or something similar? In the documentation, it doesn't really seem to bind to anything. Thanks in advance!

Kind regards,

Henk Bourgonje

[anasmohammed361]

Currently i dont think there is a way to do it but it can be done. Probably would be easy to fallback to <input /> and you can just copy paste the styling from your Input element

[sheecegardezi]

@HenkBourgonje bare minimal example

<script>
    import {Label} from "$lib/components/ui/label";

    let files;

    $: if (files) {
        console.log(files);

        for (const file of files) {
            console.log(`${file.name}: ${file.size} bytes`);
        }
    }

</script>

<div class="grid w-full max-w-sm items-center gap-1.5">
    <Label for="file">Upload FIle</Label>
    <input
            accept="image/png, image/jpeg"
            bind:files class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="file"
            name="file" type="file"
    />
</div>

{#if files}
    <h2>Selected files:</h2>
    {#each Array.from(files) as file}
        <p>{file.name} ({file.size} bytes)</p>
    {/each}
{/if}