bknd/dist/types/ui/elements/media/Dropzone.d.ts

Lightweight Firebase/Supabase alternative built to run anywhere — incl. Next.js, React Router, Astro, Cloudflare, Bun, Node, AWS Lambda & more.

import type { DB } from "../../../core";
import { type ComponentPropsWithRef, type ReactNode, type RefObject } from "react";
import { type FileWithPath } from "./use-dropzone";
import { createDropzoneStore } from "../../../ui/elements/media/dropzone-state";
export type FileState = {
    body: FileWithPath | string;
    path: string;
    name: string;
    size: number;
    type: string;
    state: "pending" | "uploading" | "uploaded" | "failed" | "initial" | "deleting";
    progress: number;
};
export type FileStateWithData = FileState & {
    data: DB["media"];
};
export type DropzoneRenderProps = {
    store: ReturnType<typeof createDropzoneStore>;
    wrapperRef: RefObject<HTMLDivElement | null>;
    inputProps: ComponentPropsWithRef<"input">;
    actions: {
        uploadFile: (file: {
            path: string;
        }) => Promise<void>;
        deleteFile: (file: {
            path: string;
        }) => Promise<void>;
        openFileInput: () => void;
    };
    showPlaceholder: boolean;
    onClick?: (file: {
        path: string;
    }) => void;
    footer?: ReactNode;
    dropzoneProps: Pick<DropzoneProps, "maxItems" | "placeholder" | "autoUpload" | "flow">;
};
export type DropzoneProps = {
    getUploadInfo: (file: {
        path: string;
    }) => {
        url: string;
        headers?: Headers;
        method?: string;
    };
    handleDelete: (file: {
        path: string;
    }) => Promise<boolean>;
    initialItems?: FileState[];
    flow?: "start" | "end";
    maxItems?: number;
    allowedMimeTypes?: string[];
    overwrite?: boolean;
    autoUpload?: boolean;
    onRejected?: (files: FileWithPath[]) => void;
    onDeleted?: (file: {
        path: string;
    }) => void;
    onUploaded?: (files: FileStateWithData[]) => void;
    onClick?: (file: FileState) => void;
    placeholder?: {
        show?: boolean;
        text?: string;
    };
    footer?: ReactNode;
    children?: ReactNode | ((props: DropzoneRenderProps) => ReactNode);
};
export declare function Dropzone({ getUploadInfo, handleDelete, initialItems, flow, allowedMimeTypes, maxItems, overwrite, autoUpload, placeholder, onRejected, onDeleted, onUploaded, children, onClick, footer, }: DropzoneProps): import("react/jsx-runtime").JSX.Element;
export declare function useDropzoneContext(): DropzoneRenderProps;
export declare const useDropzoneState: () => {
    files: FileState[];
    isOver: boolean;
    isOverAccepted: boolean;
};
export declare const useDropzoneFileState: <R = any>(pathOrFile: string | FileState, selector: (file: FileState) => R) => R | undefined;