@octopusdeploy/design-system-components/dist/src/components/Form/FileUpload/FileUpload.d.ts

The design systems component library.

import type React from "react";
import type { ReactNode } from "react";
import type { PopoverBasicHelpProps } from "../../Popover";
import type { DescriptionContent } from "../utils/descriptionWithLinks";
export type FileUploadValidationState = "idle" | "validating" | "error";
export interface FileUploadProps {
    /**
     * The label for the file upload.
     */
    label: string;
    /**
     * Optional description paragraph to display under the label.
     * Can be either:
     * - A simple string (basic usage)
     * - A DescriptionContent array created with descriptionText`...` for rich content with links and code
     * @example
     * // Simple string
     * description="This is a basic description."
     *
     * // Rich content with links and code
     * description={descriptionText`Set ${descriptionCode("isVisible")} prop or see ${descriptionLink("docs", "/docs")}.`}
     */
    description?: string | DescriptionContent;
    /**
     * PopoverBasicHelp component to display additional help information
     * displays the Information icon next to the label
     */
    popover?: React.ReactElement<PopoverBasicHelpProps>;
    /**
     * If true displays the (optional) text next to the label
     */
    hasOptionalMarker?: boolean;
    /**
     * If true displays the (required) text next to the label
     */
    hasRequiredMarker?: boolean;
    /**
     * Whether this field has a default value marker
     */
    hasDefaultMarker?: boolean;
    /**
     * Validation message per file to display. Keyed by the File reference returned via `onChange`.
     * Files with an entry render with a danger border and the message inside the file row.
     */
    validationMessages?: Map<File, ReactNode>;
    /**
     * Controlled validation lifecycle state. Consumers run async validation outside this component
     * and use this to indicate whether validation is in progress or has produced errors.
     * @default "idle"
     */
    validationState?: FileUploadValidationState;
    /**
     * Message rendered alongside the spinner while `validationState === "validating"`.
     * @default "Validation in progress"
     */
    validatingMessage?: ReactNode;
    /**
     * The action to perform when the form control field is changed.
     */
    onChange: (newValue: File[]) => void;
    /**
     * Called whenever an internal dropzone validation error is set or cleared.
     * Receives the error message string when an error occurs, or `undefined` when it is cleared.
     */
    onError?: (error: string | undefined) => void;
    /**
     * The max number of files that can be selected.
     * @default 1
     */
    filesLimit?: number;
    /**
     * The max file size in bytes.
     */
    maxFileSizeBytes?: number;
    /**
     * The supported file types.
     * These must be case insensitive filename extensions starting with a period e.g. ".txt", ".jpg"
     */
    acceptedFileTypes?: string[];
}
export declare function FileUpload({ label, description, popover, hasOptionalMarker, hasRequiredMarker, hasDefaultMarker, validationMessages, validationState, validatingMessage, onChange, onError, filesLimit, maxFileSizeBytes, acceptedFileTypes, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;