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 "../../..";
import { type ComponentPropsWithRef, type ReactNode, type RefObject } from "react";
import { type FileWithPath } from "./use-dropzone";
import { createDropzoneStore } from "./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;
        addFiles: (files: (File | FileWithPath)[]) => void;
    };
    showPlaceholder: boolean;
    onClick?: (file: {
        path: string;
    }) => void;
    footer?: ReactNode;
    dropzoneProps: Pick<DropzoneProps, "maxItems" | "placeholder" | "autoUpload" | "flow" | "allowedMimeTypes">;
};
export type DropzoneProps = {
    /**
     * Get the upload info for a file
     */
    getUploadInfo: (file: {
        path: string;
    }) => {
        url: string;
        headers?: Headers;
        method?: string;
    };
    /**
     * Handle the deletion of a file
     */
    handleDelete: (file: {
        path: string;
    }) => Promise<boolean>;
    /**
     * The initial items to display
     */
    initialItems?: FileState[];
    /**
     * Maximum number of media items that can be uploaded
     */
    maxItems?: number;
    /**
     * The allowed mime types
     */
    allowedMimeTypes?: string[];
    /**
     * If true, the media item will be overwritten on entity media uploads if limit was reached
     */
    overwrite?: boolean;
    /**
     * If true, the media items will be uploaded automatically
     */
    autoUpload?: boolean;
    /**
     * Whether to add new items to the start or end of the list
     * @default "start"
     */
    flow?: "start" | "end";
    /**
     * The on rejected callback
     */
    onRejected?: (files: FileWithPath[]) => void;
    /**
     * The on deleted callback
     */
    onDeleted?: (file: {
        path: string;
    }) => void;
    /**
     * The on uploaded all callback
     */
    onUploadedAll?: (files: FileStateWithData[]) => void;
    /**
     * The on uploaded callback
     */
    onUploaded?: (file: FileStateWithData) => void;
    /**
     * The on clicked callback
     */
    onClick?: (file: FileState) => void;
    /**
     * The placeholder to use
     */
    placeholder?: {
        show?: boolean;
        text?: string;
    };
    /**
     * The footer to render
     */
    footer?: ReactNode;
    /**
     * The children to render
     */
    children?: ReactNode | ((props: DropzoneRenderProps) => ReactNode);
};
export declare function Dropzone({ getUploadInfo, handleDelete, initialItems, flow, allowedMimeTypes, maxItems, overwrite, autoUpload, placeholder, onRejected, onDeleted, onUploadedAll, 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;
    uploading: boolean;
};
export declare const useDropzoneFileState: <R = any>(pathOrFile: string | FileState, selector: (file: FileState) => R) => R | undefined;