import * as i0 from '@angular/core'; import { OnInit, AfterViewInit, EventEmitter, QueryList, ElementRef, TemplateRef, PipeTransform } from '@angular/core'; import { ControlValueAccessor, ValidatorFn, AsyncValidatorFn } from '@angular/forms'; import { EuiTemplateDirective } from '@eui/components/directives'; import { HttpEvent } from '@angular/common/http'; import { Observable, MonoTypeOperatorFunction, UnaryFunction } from 'rxjs'; interface EuiUploadedFileInterface { id?: string | number; name?: string; url?: string; size?: number; type?: string; } /** * @description * `eui-file-upload` component supporting both traditional file selection and drag-and-drop functionality. * Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms. * `eui-file-upload` provides file preview, upload progress tracking, file type filtering, and multiple file management. * `eui-file-upload` displays uploaded files with customizable templates for previews, buttons, and progress indicators. * * @usageNotes * ### Basic file upload * ```html * * * ``` * * ### With form control * ```typescript * fileControl = new FormControl([]); * ``` * ```html * * * ``` * * ### Accessibility * - Native file input is keyboard accessible * - Drag-and-drop area announces state changes to screen readers * - File list items are navigable and removable via keyboard * * ### Notes * - Use `accept` to filter file types (e.g., "image/*", ".pdf") * - Progress tracking requires external upload logic to update `progress` input * - Customize UI with templates: uploadedFile, browseButton, resetButton, progressBar * - Set `maxFiles` to limit simultaneous uploads */ declare class EuiFileUploadComponent implements ControlValueAccessor, OnInit, AfterViewInit { /** * Data attribute used for end-to-end testing identification. * @default 'eui-file-upload' */ e2eAttr: string; /** * Current upload progress percentage displayed in the progress bar. * Only effective when hasProgressBar is true. Value should be between 0 and 100. * Must be updated externally to reflect actual upload progress. */ progress: number; /** * Comma-separated list of allowed file extensions for upload filtering. * Files not matching the specified extensions will be rejected. * Use '*' to allow all file types. * @default '*' */ accept: string; /** * Maximum number of files that can be uploaded simultaneously. * When limit is reached, additional file selection is disabled. * Set to null or undefined for unlimited files. * @default null */ maxFiles: number; /** * Emitted when files are dropped into the drag-and-drop area. * Triggered after files are processed and added to the upload queue. * No payload is emitted. */ fileDrop: EventEmitter; /** * Emitted when a file in the upload list is clicked. * Only triggers when isItemsClickable is true. * Payload: Blob, EuiUploadedFileInterface, or any file object representing the clicked item. */ itemClick: EventEmitter; /** * Sets the `class` attribute for the host element. * * @returns A string with all CSS classes applied. */ get cssClasses(): string; files: File[]; filesTotalSize: number; /** * Random number generated to give an unique id to the field. */ randomNumberId: number; /** * List of existing files to display in the component. * * @type {EuiUploadedFileInterface[]} */ uploadedFiles: EuiUploadedFileInterface[]; dragEntered: boolean; /** * List of templates passed to the component. */ templates: QueryList; fileInputs: QueryList>; uploadedFileTemplate: TemplateRef<{ $implicit: { file: EuiUploadedFileInterface; index: number; isFileObject: boolean; }; }>; browseButtonTemplate: TemplateRef; resetButtonTemplate: TemplateRef; progressBarTemplate: TemplateRef<{ $implicit: { progress: number; }; }>; /** * Enables selection of multiple files in a single upload operation. * When false, only one file can be selected at a time. * @default true */ isMultiple: boolean; /** * Displays a progress bar indicating upload completion percentage. * Progress value must be provided via the progress input property. * @default true */ hasProgressBar: boolean; /** * Displays a visual preview for each file in the upload list. * Preview type is controlled by hasPreviewAsImage and hasPreviewAsIcon properties. * @default true */ hasPreview: boolean; /** * Renders file previews as thumbnail images for supported image file types. * Automatically disabled when hasPreviewAsIcon is true. * @default true */ hasPreviewAsImage: boolean; /** * Renders file previews as file format icons instead of image thumbnails. * When enabled, automatically sets hasPreviewAsImage to false. * @default false */ hasPreviewAsIcon: boolean; /** * Shows the total combined size of all files in the upload queue. * Provides users with visibility into total upload size. * @default true */ hasTotalSizeDisplayed: boolean; /** * Displays a button to clear all files from the upload queue. * Only visible when isMultiple is true and files are present. * @default true */ hasResetButton: boolean; /** * Enables drag-and-drop functionality for file selection. * Displays a drop zone area where users can drag files from their file system. * @default false */ hasDragArea: boolean; /** * Makes files in the upload list clickable, emitting itemClick events on interaction. * Useful for implementing file preview or detail views. * @default false */ isItemsClickable: boolean; /** * Drag and drop area listener. * * @param fileList `FileList` containing dropped file and initial file. */ emitFiles(fileList: FileList): void; /** * Determines whether the reset button should be displayed. * * @returns {boolean} `true` if the reset button should be shown, otherwise `false`. */ get showResetBtn(): boolean; /** * Determines whether the drop area should be disabled. * * @returns {boolean} `true` if the drop area is disabled, otherwise `false`. */ get isDropAreaDisabled(): boolean; ngOnInit(): void; ngAfterViewInit(): void; onDragEnter(): void; onDragLeave(): void; /** * Remove a file from the array of files choosen by the user. * * @param index Index of the file to remove in the array. */ removeFromList(index: number): void; /** * Remove a file from the array of files provided to the component as existing values. * * @param index Index of the file to remove in the array. */ removeFromUploadedList(index: number): void; /** * Reset the list of files in the component. */ resetList(): void; openBrowseWindow(): void; /** * Click item handler. * @param e The item clicked. Will be a `Blob` for a file to be uploaded, `EuiUploadedFileInterface` for an initial file. */ onItemClick(e: Blob | EuiUploadedFileInterface | any): void; writeValue(value: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; private onChange; /** * Calculates the total size to be uploaded. */ private getTotalSize; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isMultiple: unknown; static ngAcceptInputType_hasProgressBar: unknown; static ngAcceptInputType_hasPreview: unknown; static ngAcceptInputType_hasPreviewAsImage: unknown; static ngAcceptInputType_hasPreviewAsIcon: unknown; static ngAcceptInputType_hasTotalSizeDisplayed: unknown; static ngAcceptInputType_hasResetButton: unknown; static ngAcceptInputType_hasDragArea: unknown; static ngAcceptInputType_isItemsClickable: unknown; } /** * `eui-file-upload-progress` component for displaying file upload completion status. * Renders a visual indicator showing the percentage of upload progress. * Typically used internally by `eui-file-upload` but can be used standalone for custom upload implementations. */ declare class EuiFileUploadProgressComponent { /** * Current upload progress percentage to display in the progress bar. * Value should be between 0 and 100, where 0 represents no progress and 100 represents completion. * @default 0 */ progress: number; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Internal class used by `eui-file-upload` to display the files to be uploaded. */ declare class EuiFilePreviewComponent implements OnInit, AfterViewInit { /** * The file to use. Will be a `Blob` for a file to be uploaded, `EuiUploadedFileInterface` for an initial file. */ file: Blob | EuiUploadedFileInterface | any; /** * Template to use in the list of files. */ uploadedFileTemplate: TemplateRef<{ $implicit: { file: EuiUploadedFileInterface; index: number; isFileObject: boolean; }; }>; /** * Index of the file in the list. */ index: number; /** * Object matching extension and icon. */ previewAsIconConfig: { avi: string; html: string; htm: string; js: string; json: string; mp3: string; mp4: string; pdf: string; png: string; svg: string; txt: string; xml: string; jpeg: string; jpg: string; zip: string; doc: string; docx: string; xls: string; xlsx: string; ppt: string; csv: string; rtf: string; }; /** * Event emitted when the remove button is clicked. */ removeFromList: EventEmitter; url: string; icon: string; fileExtension: string; previewData: { image: boolean; display: string; }; isLoading: boolean; typeFromFileExtension: string; /** * Event emitted when a chosen file to upload is clicked. */ itemClick: EventEmitter; /** * Whether a preview, image or icon, is displayed for a file to upload. * * @default true */ hasPreview: boolean; /** * Whether the filename is displayed. * * @default true */ isFilenameDisplayed: boolean; /** * Whether the filesize is displayed. * * @default true */ isFilesizeDisplayed: boolean; /** * Whether the file type is displayed. * * @default true */ isFiletypeDisplayed: boolean; /** * Whether a preview is displayed as image. * * @default true */ hasPreviewAsImage: boolean; /** * Whether a preview is displayed as a file format icon. * * @default false */ hasPreviewAsIcon: boolean; /** * Whether items can be clicked. `itemClick` event is emitted. * * @default false */ isItemsClickable: boolean; /** * Whether the file is `File` or has been provided by the user as initial value. * * @default false */ isFileObject: boolean; templates: QueryList; private cd; ngOnInit(): void; ngAfterViewInit(): void; /** * Remove from the list handler. */ onRemoveFromList(): void; /** * Click item handler. * @param e The item clicked. */ onItemClick(e: Event): void; /** * Method returning a file extension. * * @param fileName Filename of the file * @returns the extension as a string */ private getFileExtension; /** * Method that returns the preview for a file. * * @param fileExtension Extension of the file * @param imgUrl URL of the file * @returns The image URL of valid image otherwise an icon of the extension */ private getPreviewForMime; /** * Method that return the icon for a MIME type. * * @param fileExtension Extension of the file * @returns An icon string */ private getIconForMime; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasPreview: unknown; static ngAcceptInputType_isFilenameDisplayed: unknown; static ngAcceptInputType_isFilesizeDisplayed: unknown; static ngAcceptInputType_isFiletypeDisplayed: unknown; static ngAcceptInputType_hasPreviewAsImage: unknown; static ngAcceptInputType_hasPreviewAsIcon: unknown; static ngAcceptInputType_isItemsClickable: unknown; static ngAcceptInputType_isFileObject: unknown; } /** * A pipe that transforms a file size in bytes into a human-readable format (e.g., KB, MB, GB). * * @example * {{ 1024 | filesize }} // Outputs: "1.00 KB" * {{ 1048576 | filesize:1 }} // Outputs: "1.0 MB" * * @param {number} bytes - The file size in bytes. * @param {number} [precision=2] - The number of decimal places to include in the output. * @returns {string} The formatted file size with the appropriate unit. */ declare class EuiFileSizePipe implements PipeTransform { private units; /** * Method used to format a size. * * @param bytes Bytes to format. * @param precision Number of decimal * @returns String with formated size and unit. */ transform(bytes?: number, precision?: number): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } declare class EuiFileUploadUtilsService { private httpClient; /** * @description * Method that will format data in `FormData` and send them to backend. * * @example * Call the method and log the response in the console. * * ``` * this.euiFileUploadUtilsService.sendData(this.form.value, 'http://localhost:3000/api/fake-api').pipe( * this.euiFileUploadUtilsService.uploadProgress((progress) => { * console.log(progress); * }), * this.euiFileUploadUtilsService.toResponseBody(), * ).subscribe((response) => { * console.log(response); * }); * ``` * * @param data Data to send to backend * @param APIEndPoint Endpoint URL * @returns The backend response. */ sendData(data: any, APIEndPoint: string): Observable; /** * @description * Method that will return the upload progress. * * @example * Call the method and log the progress in the console. * * ``` * this.euiFileUploadUtilsService.sendData(this.form.value, 'http://localhost:3000/api/fake-api').pipe( * this.euiFileUploadUtilsService.uploadProgress((progress) => { * console.log(progress); * }), * this.euiFileUploadUtilsService.toResponseBody(), * ).subscribe((response) => { * console.log(response); * }); * ``` * * @param cb A method to execute on each progress step. * @returns A number between 0 and 100. */ uploadProgress(cb: (progress: number) => void): MonoTypeOperatorFunction>; /** * @description * Method that will return only the body of the backend response. * * @example * Call the method and log the response in the console. * * ``` * this.euiFileUploadUtilsService.sendData(this.form.value, 'http://localhost:3000/api/fake-api').pipe( * this.euiFileUploadUtilsService.uploadProgress((progress) => { * console.log(progress); * }), * this.euiFileUploadUtilsService.toResponseBody(), * ).subscribe((response) => { * console.log(response); * }); * ``` * * @returns The backend response. */ toResponseBody(): UnaryFunction>, Observable>; /** * @description * Return the icon to be used with eui-icon-svg of the given extension or a default file icon * * @param fileExtension * @returns Icon name as string */ getIconForExtension(fileExtension: string): string; /** * Internal method returning `FormData` object. * * @param formValue Data to send to form * @returns A `FormData` object */ private toFormData; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } type MimeType = 'image/jpeg' | 'image/png' | 'image/gif' | 'image/webp' | 'image/flif' | 'image/x-xcf' | 'image/x-canon-cr2' | 'image/x-canon-cr3' | 'image/tiff' | 'image/bmp' | 'image/icns' | 'image/vnd.ms-photo' | 'image/vnd.adobe.photoshop' | 'application/x-indesign' | 'application/epub+zip' | 'application/x-xpinstall' | 'application/vnd.oasis.opendocument.text' | 'application/vnd.oasis.opendocument.spreadsheet' | 'application/vnd.oasis.opendocument.presentation' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/zip' | 'application/json' | 'application/x-tar' | 'application/x-rar-compressed' | 'application/gzip' | 'application/x-bzip2' | 'application/x-7z-compressed' | 'application/x-apple-diskimage' | 'video/mp4' | 'audio/midi' | 'video/x-matroska' | 'video/webm' | 'video/quicktime' | 'video/vnd.avi' | 'audio/vnd.wave' | 'audio/qcelp' | 'audio/x-ms-asf' | 'video/x-ms-asf' | 'application/vnd.ms-asf' | 'video/mpeg' | 'video/3gpp' | 'audio/mpeg' | 'audio/mp4' | 'audio/opus' | 'video/ogg' | 'audio/ogg' | 'application/ogg' | 'audio/x-flac' | 'audio/ape' | 'audio/wavpack' | 'audio/amr' | 'application/pdf' | 'application/x-elf' | 'application/x-msdownload' | 'application/x-shockwave-flash' | 'application/rtf' | 'application/wasm' | 'font/woff' | 'font/woff2' | 'application/vnd.ms-fontobject' | 'font/ttf' | 'font/otf' | 'image/x-icon' | 'video/x-flv' | 'application/postscript' | 'application/eps' | 'application/x-xz' | 'application/x-sqlite3' | 'application/x-nintendo-nes-rom' | 'application/x-google-chrome-extension' | 'application/vnd.ms-cab-compressed' | 'application/x-deb' | 'application/x-unix-archive' | 'application/x-rpm' | 'application/x-compress' | 'application/x-lzip' | 'application/x-cfb' | 'application/x-mie' | 'application/x-apache-arrow' | 'application/mxf' | 'video/mp2t' | 'application/x-blender' | 'image/bpg' | 'image/j2c' | 'image/jp2' | 'image/jpx' | 'image/jpm' | 'image/mj2' | 'audio/aiff' | 'application/xml' | 'application/x-mobipocket-ebook' | 'image/heif' | 'image/heif-sequence' | 'image/heic' | 'image/heic-sequence' | 'image/ktx' | 'application/dicom' | 'audio/x-musepack' | 'text/calendar' | 'text/vcard' | 'model/gltf-binary' | 'application/vnd.tcpdump.pcap' | 'audio/x-voc' | 'audio/vnd.dolby.dd-raw' | 'audio/x-m4a' | 'image/apng' | 'image/x-olympus-orf' | 'image/x-sony-arw' | 'image/x-adobe-dng' | 'image/x-nikon-nef' | 'image/x-panasonic-rw2' | 'image/x-fujifilm-raf' | 'video/x-m4v' | 'video/3gpp2' | 'application/x-esri-shape' | 'audio/aac' | 'audio/x-it' | 'audio/x-s3m' | 'audio/x-xm' | 'video/MP1S' | 'video/MP2P' | 'application/vnd.sketchup.skp' | 'image/avif' | 'application/x-lzh-compressed' | 'application/pgp-encrypted' | 'application/x-asar' | 'model/stl' | 'application/vnd.ms-htmlhelp' | 'model/3mf' | 'image/jxl' | 'application/zstd' | 'image/jls' | 'application/vnd.ms-outlook' | 'image/vnd.dwg' | 'application/x-parquet' | 'application/java-vm' | 'application/x-arj' | 'application/x-cpio' | 'application/x-ace-compressed' | 'application/avro' | 'application/vnd.iccprofile'; declare const getMimeType: (header: Uint8Array) => MimeType; /** * @description * Validator that requires the maximum length of files that can be uploaded. * * @example * Validate that the user selected maximum 3 files: * * ``` * const fileUpload = new FormControl(null, maxFilesValidator(3)); * console.log(fileUpload.errors); // { maxFiles: 3 } * ``` * * @param {MimeType[]} maxFiles - The maximum number of files allowed. * @returns A validator function that returns an error map with the * `maxFiles` if the validation check fails, otherwise `null`. */ declare const maxFilesValidator: (maxFiles: number) => ValidatorFn; /** * @description * Validator that checks the **total size** (in bytes) of the selected files. * Returns an error when the combined size exceeds the provided limit. * * @example * Validate that the user doesn't select files whose **combined size** exceeds 300 kB (300000 bytes): * * ```ts * const fileUpload = new FormControl(null, maxSizeValidator(300000)); * console.log(fileUpload.errors); // { maxSize: 300000 } if totalSize > 300000 * ``` * * @param {number} maxSize - Maximum allowed **total size** in bytes. * @returns A validator function that returns `{ maxSize }` if the validation check fails, * otherwise `null`. */ declare const maxSizeValidator: (maxSize: number) => ValidatorFn; /** * @description * Validator that checks the **maximum size per file** (in bytes). * Returns an error if one or more selected files exceed the configured limit. * * @example * Validate that the user doesn't select files that exceed 300 kB (300000 bytes) per file: * * ```ts * const fileUpload = new FormControl(null, maxFileSizeValidator(300000)); * console.log(fileUpload.errors); // { maxFileSize: 300000, indexes: [0, 2] } * ``` * * @param {number} maxFileSize - Maximum allowed size **per file** in bytes. * @returns A validator function that returns `{ maxFileSize, indexes }` if the validation check fails, * otherwise `null`. `indexes` contains the indices of the files that exceeded the limit. */ declare const maxFileSizeValidator: (maxFileSize: number) => ValidatorFn; /** * @description * Validator that requires an array of mime type that can be uploaded. * * @example * Validate that the user doesn't select a file having another extension than .jpg or .jpeg: * ``` * const fileUpload = new FormControl(null, mimeTypeExtensionValidator(['image/jpeg'])), * console.log(fileUpload.errors); // { invalidFileExtension: ['image/jpeg'] } * ``` * * @param {MimeType[]} mimeTypes - The list of allowed MIME types. * @returns A validator function that returns an error map with the * `invalidFileExtension` if the validation check fails, otherwise `null`. */ declare const mimeTypeExtensionValidator: (mimeTypes: string[]) => ValidatorFn; /** * @description * Validator that requires an array of mime type that can be uploaded. * * @example * Validate that the user doesn't select a file having another extension than .jpg or .jpeg: * * ``` * const fileUpload = new FormControl(null, mimeTypeExtensionValidator(['image/jpeg'])), * console.log(fileUpload.errors); // { invalidMimeFileType: ['image/jpeg'] } * ``` * @param {MimeType[]} mimeTypes - The list of allowed MIME types. * @returns An Async validator function that returns an error map with the * `invalidMimeFileType` if the validation check fails, otherwise `null`. */ declare const asyncMimeTypeExtensionValidator: (mimeTypes: MimeType[]) => AsyncValidatorFn; declare const EUI_FILE_UPLOAD: readonly [typeof EuiFileUploadComponent, typeof EuiFileUploadProgressComponent, typeof EuiFilePreviewComponent, typeof EuiFileSizePipe]; export { EUI_FILE_UPLOAD, EuiFilePreviewComponent, EuiFileSizePipe, EuiFileUploadComponent, EuiFileUploadProgressComponent, EuiFileUploadUtilsService, asyncMimeTypeExtensionValidator, getMimeType, maxFileSizeValidator, maxFilesValidator, maxSizeValidator, mimeTypeExtensionValidator }; export type { EuiUploadedFileInterface, MimeType }; //# sourceMappingURL=eui-components-eui-file-upload.d.ts.map