melt/dist/builders/FileUpload.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import type { MaybeGetter, MaybeMultiple } from "../types";
export type FileUploadError = {
    type: "size" | "type" | "validation" | "custom";
    file: File;
    message: string;
};
export type FileUploadProps<Multiple extends boolean = false> = {
    /**
     * The currently selected files.
     */
    selected?: MaybeMultiple<File, Multiple>;
    /**
     * Callback fired when selected files change
     */
    onSelectedChange?: (files: Multiple extends true ? Set<File> : File | undefined) => void;
    /**
     * Whether to accept multiple files
     * @default false
     */
    multiple?: MaybeGetter<Multiple | undefined>;
    /**
     * The accepted file types. Can be a MIME type, a MIME group, or a file extension.
     * Separate multiple types with a comma.
     * @example 'image/jpeg'
     * @example 'image/*'
     * @example '.png, .jpg, .jpeg'
     */
    accept?: MaybeGetter<string | undefined>;
    /**
     * Maximum file size in bytes
     * @default undefined
     */
    maxSize?: MaybeGetter<number | undefined>;
    /**
     * Whether the file upload is disabled
     * @default false
     */
    disabled?: MaybeGetter<boolean | undefined>;
    /**
     * Custom validate fn. Will be called together with the original validation,
     * which takes into account the `accept` and `maxSize` props.
     */
    validate?: (file: File) => boolean;
    /**
     * Callback fired when a file fails validation
     */
    onError?: (error: FileUploadError) => void;
    /**
     * Callback fired when a file is accepted
     */
    onAccept?: (file: File) => void;
    /**
     * If true, checks the files contents to avoid duplicate.
     * It's performance is not tested in large files, so by default its set to false.
     *
     * @default false
     */
    avoidDuplicates?: MaybeGetter<boolean | undefined>;
};
export declare class FileUpload<Multiple extends boolean = false> {
    #private;
    readonly multiple: Multiple;
    readonly accept: string | undefined;
    readonly maxSize: number | undefined;
    readonly disabled: boolean;
    readonly avoidDuplicates: boolean;
    ids: {
        input: string;
        dropzone: string;
    };
    constructor(props?: FileUploadProps<Multiple>);
    get isDragging(): boolean;
    /**
     * Gets the currently selected files
     */
    get selected(): import("../utils/selection-state.svelte").SelectionStateValue<File, Multiple>;
    /**
     * Sets the currently selected files
     */
    set selected(value: import("../utils/selection-state.svelte").SelectionStateValue<File, Multiple>);
    /**
     * Clears the currently selected files
     */
    clear(): void;
    /**
     * Removes a file from the selection
     */
    remove(file: File): void;
    has(file: File): Promise<boolean>;
    /** The dropzone element, where you can drag files into, or click to open the file picker. */
    get dropzone(): {
        readonly "data-melt-fileupload-dropzone": "";
        readonly "data-dragging": "" | undefined;
        readonly "data-disabled": "" | undefined;
        readonly ondragenter: (e: DragEvent) => void;
        readonly ondragleave: (e: DragEvent) => void;
        readonly ondragover: (e: DragEvent) => void;
        readonly ondrop: (e: DragEvent) => void;
        readonly onclick: () => void;
    };
    /** The hidden file input element. */
    get input(): {
        readonly "data-melt-fileupload-input": "";
        readonly id: string;
        readonly type: "file";
        readonly accept: string | undefined;
        readonly multiple: Multiple;
        readonly style: "display: none;";
        readonly disabled: boolean;
        readonly onchange: (e: Event) => void;
    };
    /** An optional trigger element, which can be used to open the file picker. */
    get trigger(): {
        readonly "data-disabled": "" | undefined;
        readonly onclick: () => void;
    };
}