<script lang="ts">
    import File from '$lib/components/file.svelte';
    import AddButton from '$lib/components/add_button.svelte';
    let selected = $state([]);
    let files: Array<File> = $state([]);

    $effect(() => {
        if (selected.length > 0) {
            let added: Array<File> = [];
            for (let file of selected)
                added.push(file);
            files = files.concat(added);
            selected = [];
        }
    });
</script>

<div class="input rounded">
    {#each files as file}
        <File data={file}/>
    {/each}
    <AddButton type="file" bind:files={selected}/>
</div>