@oslokommune/punkt-react/dist/components/fileupload/FileUpload.d.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import { FC, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
import { ItemRenderers } from './QueueDisplay';
import { FileItem, TFileItemList, TFileTransfer, TFileValidateDetail, TItemRenderer, TQueueItemOperation, TUploadStrategy } from './types';
export { formatFileSize, parseFileSize } from '../../shared-utils/fileupload';
/**
 * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
 */
interface IBaseFileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'> {
    /** Called with the next file list when files are added/removed/updated. */
    onFilesChanged?: (files: TFileItemList) => void;
    /** Allow selecting/dropping multiple files. */
    multiple?: boolean;
    /** Controlled value (recommended). */
    value?: TFileItemList;
    /** Upload mode. Defaults to `"form"`. */
    uploadStrategy?: TUploadStrategy;
    /** Field name. Used for native input (`form`) or hidden ID inputs (`custom`). */
    name: string;
    /** Enable comment operation (disabled automatically in thumbnail view). */
    addCommentsEnabled?: boolean;
    /** Enable rename operation (disabled automatically in thumbnail view). */
    renameFilesEnabled?: boolean;
    /** Renderer for queue items (`filename`, `thumbnail`, or custom function). */
    itemRenderer?: keyof typeof ItemRenderers | TItemRenderer;
    /** Number of trailing characters to keep when truncating long filenames. */
    truncateTail?: number;
    /**
     * Called immediately when a file is added in `uploadStrategy="custom"`.
     * Use it to start uploading the file and update `transfers`.
     */
    onFileUploadRequested?: (fileItem: FileItem) => void;
    /** Uncontrolled initial value (use either `value` or `defaultValue`, not both). */
    defaultValue?: TFileItemList;
    /** Extra operations appended after built-ins (rename/comment). */
    extraOperations?: Array<TQueueItemOperation>;
    /** Stretch to full container width (drop zone + queue). */
    fullwidth?: boolean;
    /** Allowed formats for built-in validation (extensions like `pdf`, or MIME patterns like `image/*`). */
    allowedFormats?: string[];
    /** Custom message for invalid format. Use `{formats}` placeholder. */
    formatErrorMessage?: string;
    /** Max file size (e.g. `"5MB"` or bytes). */
    maxFileSize?: string | number;
    /** Custom message for size validation. Use `{maxSize}` placeholder. */
    sizeErrorMessage?: string;
    /** Optional additional validation hook (runs after built-in format/size checks). Return string to block. */
    onFileValidation?: (file: File) => string | null;
    /**
     * Low-level validation escape hatch — Lit parity with the `file-validate` CustomEvent.
     * Receives a detail object whose `errorMessage` can be mutated; set it to reject the file.
     */
    onFileValidate?: (detail: TFileValidateDetail) => void;
    /** External/programmatic error message shown under the component. */
    errorMessage?: string;
    /** External error flag (combined with internal validation errors). */
    hasError?: boolean;
    /** Disable the whole component (no interaction). */
    disabled?: boolean;
    /** Optional label/title (wraps the component in `PktInputWrapper`). */
    label?: string;
    /** Help text under the label. */
    helptext?: string | ReactNode;
    /** Expandable help text (dropdown). */
    helptextDropdown?: string | ReactNode;
    /** Button label for expandable help text. */
    helptextDropdownButton?: string;
    /** Shows an "optional" tag. */
    optionalTag?: boolean;
    /** Label text for the optional tag. */
    optionalText?: string;
    /** Shows a "required" tag. */
    requiredTag?: boolean;
    /** Label text for the required tag. */
    requiredText?: string;
    /** Extra tag next to the label. */
    tagText?: string | null;
    /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
    required?: boolean;
    /** Enable image preview modal (only applies to thumbnail renderer). */
    enableImagePreview?: boolean;
}
interface IFileInputFileUploadProps extends IBaseFileUploadProps, Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
    uploadStrategy?: 'form';
    onFileUploadRequested?: never;
}
interface ImmediateFileUploadProps extends IBaseFileUploadProps {
    id: string;
    uploadStrategy: 'custom';
    transfers: Array<TFileTransfer>;
    onFileUploadRequested: (fileItem: FileItem) => void;
    onTransferCancelled?: (fileItemId: string) => void;
}
export type IPktFileUpload = IFileInputFileUploadProps | ImmediateFileUploadProps;
export declare const PktFileUpload: FC<IPktFileUpload>;