Flux

Drop zone ​

The drop zone lets users drop files onto its contents, typically for file uploads. It can be combined with other components, such as the Gallery, to build richer upload experiences.

Accept handling and rejected files

The accept filter is enforced on both dropped and picked files, not just the native file picker. Files that do not match accept are emitted through the reject event instead of select / select-multiple. When is-multiple is off and several files are provided, only the first match is selected and the remaining files are reported as rejected too. Listen to reject to give the user feedback about what was skipped.

Props

accept?: string
Configure which file types the drop zone accepts, as a comma-separated list of extensions (`.png`), MIME types (`image/png`) or wildcards (`image/*`). Enforced on both drop and picker. Non-matching files are emitted through `reject` instead of `select`.

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

reject: [File[]]
Triggered when one or more files are rejected, either because they do not match `accept`, or because extra files were provided while `is-multiple` is off. Receives the rejected files.

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>

Avatar

A circular drop zone wrapped around an avatar, useful for profile picture uploads.

<template>
    <FluxDropZone style="display: inline-flex; --dz-radius: calc(96px * 0.3)">
        <FluxAvatar
            :size="96"
            fallback-initials="JD"/>
    </FluxDropZone>
</template>

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

Used components ​