Dropzone

Multi-file drag-and-drop upload area built on react-dropzone. Files are uploaded immediately on drop/selection; Dropzone.List renders the uploaded files with progress and remove controls.

When to use

Use Dropzone for uploading one or more files via drag-and-drop or a click-to-browse area. Pair the drop area (Dropzone) with Dropzone.List — both share the same value (a DropzoneFile[]) and onChange so the list stays in sync with what was dropped.

• Inside a @uxf/form form: use @uxf/form/dropzone instead — it wires react-hook-form (useController), reads the form context, and adds count validation (minFilesCount / maxFilesCount). @uxf/ui/dropzone is the controlled primitive you drive with value / onChange.
• Single-file field with a file name: use FileInput.
• Avatar / image upload with a preview: use AvatarFileInput.

Usage

import { FileResponse } from "@uxf/core/types";
import { Dropzone } from "@uxf/ui/dropzone";
import { DropzoneFile } from "@uxf/ui/dropzone/types";
import { getDropzoneState } from "@uxf/ui/utils/get-dropzone-state";
import { useState } from "react";

// your uploader: send the file to storage, resolve with the stored file
declare function uploadFile(file: File): Promise<FileResponse>;

function Example() {
    const [files, setFiles] = useState<DropzoneFile[]>([]);
    const { status } = getDropzoneState(files);

    return (
        <>
            <Dropzone
                isDisabled={status === "UPLOADING"}
                label="Use drag and drop or click to upload"
                name="attachments"
                onChange={setFiles}
                onUploadFile={uploadFile}
                value={files}
            />
            <Dropzone.List name="attachments" onChange={setFiles} value={files} />
        </>
    );
}

API

Import from @uxf/ui/dropzone:

Related helpers and types (separate deep imports, not on the component):

• getDropzoneState — @uxf/ui/utils/get-dropzone-state
• DropzoneFile type — @uxf/ui/dropzone/types

Dropzone props (DropzoneInputProps)

Dropzone.List props (DropzoneListProps)

getDropzoneState

import { getDropzoneState } from "@uxf/ui/utils/get-dropzone-state";

const { status, errorMessage } = getDropzoneState(files);
// status: "OK" | "UPLOADING" | "ERROR"

Derives the overall upload state from the file list. Use status === "UPLOADING" to disable the drop area while files are in flight.

DropzoneFile

Extends FileResponse (@uxf/core/types) with upload bookkeeping:

Variants & states

• Files upload immediately on drop/select. Each pending file gets a temporary negative id and a progress value until its onUploadFile promise resolves and the server FileResponse replaces it.
• Removing a file that is still uploading calls its abortController.abort().
• onDropRejected fires when react-dropzone rejects files (wrong type, too large/small, too many). A ready-made handler exists at @uxf/ui/dropzone/handle-rejected-files (handleRejectedFiles), but it shows hardcoded Czech alert() messages — prefer your own handler in production.
• Inside a UiContext that provides domain, already-uploaded file names in Dropzone.List render as links to the stored file.

Requirements

Client component ("use client").

Import the required stylesheets once in your global CSS:

@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/dropzone.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.