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