@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 = "validating" | "error";
/**
 * A file selected in {@link FileUpload}. A file is either valid (no message) or in error
 * (a `validationMessage`). Consumers run validation outside the component and set the message
 * to surface a per-file error; `FileUpload` also sets it internally for files it rejects on the
 * built-in size/type checks.
 */
export interface SelectedFile {
    /**
     * The selected file.
     */
    file: File;
    /**
     * Per-file error message shown inside the file row, with a danger border. Omit when the file is valid.
     */
    validationMessage?: ReactNode;
}
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 ${descriptionText.code("isVisible")} prop or see ${descriptionText.link("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;
    /**
     * The selected files. `FileUpload` is a controlled component: the consumer owns this list
     * and updates it in response to `onChange`. Per-file validation is carried on each entry.
     */
    value: SelectedFile[];
    /**
     * The action to perform when the selected files change. Emits the next list of selected files.
     */
    onChange: (newValue: SelectedFile[]) => void;
    /**
     * Validation message for the whole component. Rendered alongside a spinner while
     * `validationState === "validating"`, otherwise rendered as an error.
     */
    validationMessage?: ReactNode;
    /**
     * Controlled validation lifecycle state for the whole component. Consumers run async validation
     * outside this component and set this to `"validating"` to indicate validation is in progress.
     * Omit when no validation is in progress.
     */
    validationState?: FileUploadValidationState;
    /**
     * 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, value, validationMessage, validationState, onChange, filesLimit, maxFileSizeBytes, acceptedFileTypes, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
/**
 * Whether a selected file is valid: it has no error message.
 * Use this to filter `value` down to the files safe to act on (read, upload, submit).
 */
export declare function isValidFile(selectedFile: SelectedFile): boolean;
/**
 * The underlying `File` from a single-file selection, or `undefined` when there is no selection
 * or it failed validation.
 */
export declare function getValidFile(selectedFile: SelectedFile | undefined): File | undefined;
/**
 * The underlying `File`s from a multi-file selection, excluding any that failed validation.
 */
export declare function getValidFiles(selectedFiles: SelectedFile[]): File[];