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
If the drop zone is disabled.

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

is-loading?: boolean
If the drop zone is in a loading state.

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

Emits

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

select-multiple: [FileList]
Triggered when multiple files are 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

A basic drop zone example.

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

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

Used components ​