import type { SyntheticEvent } from "react"; import React from "react"; import type { FileError } from "react-dropzone"; import { InputFileHintText } from "./InputFileHintText"; import { InputFileDescription } from "./InputFileDescription"; import { InputFileButton } from "./InputFileButton"; import { InputFileDropzoneWrapper } from "./InputFileDropzoneWrapper"; export interface FileUpload { /** * File Identifier */ readonly key: string; /** * The name of the file. */ readonly name: string; /** * The [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) type of the file */ readonly type: string; /** * The size of the file in bytes. */ readonly size: number; /** * The progress of a file upload between 0 and 1. * - `0` represents Upload just started. * - `1` represents a complete upload. */ readonly progress: number; /** * Base URL where file was sent as a POST. This is the same URL as what's returned in getUploadParams. */ readonly uploadUrl?: string; /** * The data url of the file. */ src(): Promise; /** * Callback for when the image file fails to load. * * This only works for image files. */ onImageLoadError?(event: SyntheticEvent): void; } export interface UploadParams { /** * Url to POST file to. */ readonly url: string; /** * Key to identify file. * If unspecified a generated Id will be used. */ readonly key?: string; /** * Any extra fields or headers to send with the upload. * If unspecified only the file will be included. */ readonly fields?: { [field: string]: string; }; /** * The HTTP method which we wish to use for the upload * * When the HTTP method is `"PUT"`, the `fields` will * be used as headers for the request * * When the HTTP method is `"POST"` the `fields` are * form fields * * @default "POST" */ readonly httpMethod?: "POST" | "PUT"; } interface InputFileProps { /** * Display variation. * @default "dropzone" */ readonly variation?: "dropzone" | "button"; /** * Size of the InputFile * @default "base" */ readonly size?: "small" | "base"; /** * Sets the `name` attribute on the underlying `` element. */ readonly name?: string; /** * Label for the InputFile's button. * @default Automatic */ readonly buttonLabel?: string; /** * Allowed File types. * * @param "images" - only accepts all types of image * @param "basicImages" - only accepts png, jpg and jpeg * @param "string[]" - accept a specific list of MIME types * * @default "all" */ readonly allowedTypes?: "all" | "images" | "basicImages" | string[]; /** * Allow for multiple files to be selected for upload. * * @default false */ readonly allowMultiple?: boolean; /** * Override the default hint text with a custom value. */ readonly hintText?: string; /** * Further description of the input. */ readonly description?: string; /** * An object which helps control and validate the number of files being uploaded * via the dropzone. * `maxFilesValidation={{ maxFiles: 3, numberOfCurrentFiles: files.length }}` */ readonly maxFilesValidation?: { /** * Maximum number of files that can be uploaded via the dropzone. */ readonly maxFiles: number; /** * The current count of uploaded files. This value should be * updated whenever a file is successfully uploaded or removed. */ readonly numberOfCurrentFiles: number; }; /** * Children will be rendered instead of the default content */ readonly children?: React.ReactNode; /** * A callback that receives a file object and returns a `UploadParams` needed * to upload the file. * * More info is available at: * https://atlantis.getjobber.com/?path=/docs/components-forms-and-inputs-inputfile--docs#getuploadparams */ getUploadParams(file: File): UploadParams | Promise; /** * Upload event handler. Triggered on upload start. */ onUploadStart?(file: FileUpload): void; /** * Upload event handler. Triggered as upload progresses. */ onUploadProgress?(file: FileUpload): void; /** * Upload event handler. Triggered on upload completion. */ onUploadComplete?(file: FileUpload): void; /** * Upload event handler. Triggered on upload error. */ onUploadError?(error: Error): void; /** * Pass a custom validator function that will be called when a file is dropped. */ readonly validator?: (file: T) => FileError | FileError[] | null; } export declare function InputFile({ variation, size, name, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, description, hintText, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, children, }: InputFileProps): React.JSX.Element; export declare namespace InputFile { var Button: typeof InputFileButton; var Description: typeof InputFileDescription; var DropzoneWrapper: typeof InputFileDropzoneWrapper; var HintText: typeof InputFileHintText; } /** * Upsert a given `FileUpload` into an array of `FileUpload`s. * `key` is used to uniquely identify files. * * @param updatedFile FileUpload File that was updated. * @param files Existing array of FileUploads. * @returns FileUpload[] updated set of files. */ export declare function updateFiles(updatedFile: FileUpload, files: FileUpload[]): FileUpload[]; export {};