NOTE: Introduced feature in v0.4.6.

NOTE: Keep in mind, while the Component does work without Javascript, it cannot display its value like FileInput can without.

FileDropInput acts as a click-to-prompt and drag'n'drop file input stylized as an alternative to FileInput.

<script>
    import {
        Button,
        FileDropInput,
        Stack,
        Text,
        Tile,
    } from "@kahi-ui/framework";
    import {X} from "lucide-svelte";

    function on_change(event) {
        if (!event.isTrusted) return;

        const {target} = event;

        files = [
            ...files,
            ...Array.from(target.files),
        ];

        target.value = "";
    }

    function on_clear_click(event) {
        files = [];
    }

    function on_remove_click(event, file) {
        files = files.filter(
            (_file) => file !== _file
        );
    }

    let files = [];
</script>

<FileDropInput multiple on:change={on_change}>
    <Stack.Container spacing="medium">
        <Text
            is="strong"
            variation="block"
            sizing="large"
        >
            &uparrow;
        </Text>

        <Text>Drag-and-drop files here...</Text>
    </Stack.Container>
</FileDropInput>

{#if files.length > 0}
    <Stack.Container
        spacing="medium"
        margin_y="medium"
    >
        {#each files as file (file.name)}
            <Tile.Container sizing="small">
                <Tile.Section>
                    <Tile.Header>
                        {file.name}
                    </Tile.Header>

                    <Text>{file.type}</Text>
                </Tile.Section>

                <Tile.Footer>
                    <Button
                        variation="clear"
                        sizing="small"
                        palette="negative"
                        on:click={(event) =>
                            on_remove_click(
                                event,
                                file
                            )}
                    >
                        <X size="1em" />
                    </Button>
                </Tile.Footer>
            </Tile.Container>
        {/each}
    </Stack.Container>

    <Stack.Container alignment_x="right">
        <Button
            variation="clear"
            palette="negative"
            on:click={on_clear_click}
        >
            Clear All
        </Button>
    </Stack.Container>
{/if}

Imports

<script>
    import {FileDropInput} from "@kahi-ui/framework";
</script>

Palette

You can change the color palette of the FileDropInput via the palette property.

<script>
    import {
        FileDropInput,
        Mosaic,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Mosaic.Container sizing="medium" spacing="medium">
    <FileDropInput>
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>DEFAULT</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="accent">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>ACCENT</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="neutral">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>NEUTRAL</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="dark">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>DARK</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="light">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>LIGHT</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="alert">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>ALERT</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="affirmative">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>AFFIRMATIVE</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="informative">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>INFORMATIVE</Text>
        </Stack.Container>
    </FileDropInput>

    <FileDropInput palette="negative">
        <Stack.Container spacing="medium">
            <Text
                is="strong"
                variation="block"
                sizing="large"
            >
                &uparrow;
            </Text>

            <Text>NEGATIVE</Text>
        </Stack.Container>
    </FileDropInput>
</Mosaic.Container>