Flux

Appearance

Drop zone ​

Allows files to be dropped on the contents of the drop zone. This is mainly used in ui elements that allow users to upload files. It can be used in combination with FluxGallery for example.

Props

accept?: string
Configure which file types the drop zone accepts.

disabled?: boolean
Wether the drop zone is disabled.

is-empty?: boolean
Wether the placeholder should be shown.

is-multiple?: boolean
If it's allowed to upload multiple files.

placeholder-button?: string
The text on the button within the placeholder.

placeholder-icon?: FluxIconName
The icon of the placeholder.

placeholder-message?: string
The message of the placeholder.

placeholder-title?: string
The title of the placeholder.

Emits

select: [FileList]
Triggered when a file is selected.

Slots

default ({
    readonly isDragging: boolean;
    readonly isDraggingOver: boolean;
    showPicker() => void;
})
Content that is shown when the drop zone is not empty.

placeholder ({
    readonly isDragging: boolean;
    readonly isDraggingOver: boolean;
    showPicker() => void;
})
Content that is shown when the drop zone is empty.

Examples ​

Basic

<template>
    <Preview>
        <FluxDropZone>
            <FluxPlaceholder
                icon="square-dashed"
                message="You can drop your files here for uploading..."
                style="width: 100%">
                <FluxSecondaryButton label="Upload"/>
            </FluxPlaceholder>
        </FluxDropZone>
    </Preview>
</template>

<script
    lang="ts"
    setup>
    import { FluxDropZone, FluxPlaceholder, FluxSecondaryButton } from '@flux-ui/components';
</script>