primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
542 lines (538 loc) • 23 kB
TypeScript
import { FileUploadPassThrough, FileBeforeUploadEvent, FileSendEvent, FileUploadEvent, FileUploadErrorEvent, FileRemoveEvent, FileSelectEvent, FileProgressEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent, FileUploadHeaderTemplateContext, FileUploadContentTemplateContext, FileUploadFileLabelTemplateContext, FileUploadMessage, FileContentRemoveEvent, FileUploadFileTemplateContext } from 'primeng/types/fileupload';
export * from 'primeng/types/fileupload';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import * as i2 from 'primeng/api';
import { BlockableUI } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ButtonDirectiveOptions } from 'primeng/types/button';
import { CSSProperties } from 'primeng/types/shared';
import { VoidListener } from 'primeng/ts-helpers';
import { Subscription } from 'rxjs';
import { BaseStyle } from 'primeng/base';
/**
*
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
*
* [Live Demo](https://www.primeng.org/fileupload/)
*
* @module fileuploadstyle
*
*/
declare enum FileUploadClasses {
/**
* Class name of the root element
*/
root = "p-fileupload",
/**
* Class name of the header element
*/
header = "p-fileupload-header",
/**
* Class name of the choose button element
*/
pcChooseButton = "p-fileupload-choose-button",
/**
* Class name of the upload button element
*/
pcUploadButton = "p-fileupload-upload-button",
/**
* Class name of the cancel button element
*/
pcCancelButton = "p-fileupload-cancel-button",
/**
* Class name of the content element
*/
content = "p-fileupload-content",
/**
* Class name of the file list element
*/
fileList = "p-fileupload-file-list",
/**
* Class name of the file element
*/
file = "p-fileupload-file",
/**
* Class name of the file thumbnail element
*/
fileThumbnail = "p-fileupload-file-thumbnail",
/**
* Class name of the file info element
*/
fileInfo = "p-fileupload-file-info",
/**
* Class name of the file name element
*/
fileName = "p-fileupload-file-name",
/**
* Class name of the file size element
*/
fileSize = "p-fileupload-file-size",
/**
* Class name of the file badge element
*/
pcFileBadge = "p-fileupload-file-badge",
/**
* Class name of the file actions element
*/
fileActions = "p-fileupload-file-actions",
/**
* Class name of the file remove button element
*/
pcFileRemoveButton = "p-fileupload-file-remove-button",
/**
* Class name of the content in basic mode
*/
basicContent = "p-fileupload-basic-content"
}
declare class FileUploadStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => string;
header: string;
pcChooseButton: string;
pcUploadButton: string;
pcCancelButton: string;
content: string;
fileList: string;
file: string;
fileThumbnail: string;
fileInfo: string;
fileName: string;
fileSize: string;
pcFileBadge: string;
fileActions: string;
pcFileRemoveButton: string;
basicContent: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<FileUploadStyle>;
}
interface FileUploadStyle extends BaseStyle {
}
/**
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
* @group Components
*/
declare class FileUpload extends BaseComponent<FileUploadPassThrough> implements BlockableUI {
componentName: string;
bindDirectiveInstance: Bind;
onAfterViewChecked(): void;
/**
* Name of the request parameter to identify the files at backend.
* @group Props
*/
name: _angular_core.InputSignal<string | undefined>;
/**
* Remote url to upload the files.
* @group Props
*/
url: _angular_core.InputSignal<string | undefined>;
/**
* HTTP method to send the files to the url such as "post" and "put".
* @group Props
*/
method: _angular_core.InputSignal<"post" | "put">;
/**
* Used to select multiple files at once from file dialog.
* @group Props
*/
multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg").
* @group Props
*/
accept: _angular_core.InputSignal<string | undefined>;
/**
* Disables the upload functionality.
* @group Props
*/
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, upload begins automatically after selection is completed.
* @group Props
*/
auto: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
* @group Props
*/
withCredentials: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Maximum file size allowed in bytes.
* @group Props
*/
maxFileSize: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* Summary message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageSummary: _angular_core.InputSignal<string>;
/**
* Detail message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageDetail: _angular_core.InputSignal<string>;
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageSummary: _angular_core.InputSignal<string>;
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageDetail: _angular_core.InputSignal<string>;
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageDetail: _angular_core.InputSignal<string>;
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageSummary: _angular_core.InputSignal<string>;
/**
* Inline style of the element.
* @group Props
*/
style: _angular_core.InputSignal<CSSProperties>;
/**
* Class of the element.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Width of the image thumbnail in pixels.
* @group Props
*/
previewWidth: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Label of the choose button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
chooseLabel: _angular_core.InputSignal<string | undefined>;
/**
* Label of the upload button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
uploadLabel: _angular_core.InputSignal<string | undefined>;
/**
* Label of the cancel button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
cancelLabel: _angular_core.InputSignal<string | undefined>;
/**
* Icon of the choose button.
* @group Props
*/
chooseIcon: _angular_core.InputSignal<string | undefined>;
/**
* Icon of the upload button.
* @group Props
*/
uploadIcon: _angular_core.InputSignal<string | undefined>;
/**
* Icon of the cancel button.
* @group Props
*/
cancelIcon: _angular_core.InputSignal<string | undefined>;
/**
* Whether to show the upload button.
* @group Props
*/
showUploadButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to show the cancel button.
* @group Props
*/
showCancelButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines the UI of the component.
* @group Props
*/
mode: _angular_core.InputSignal<"advanced" | "basic">;
/**
* HttpHeaders class represents the header configuration options for an HTTP request.
* @group Props
*/
headers: _angular_core.InputSignal<HttpHeaders | undefined>;
/**
* Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration.
* @group Props
*/
customUpload: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Maximum number of files that can be uploaded.
* @group Props
*/
fileLimit: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* Style class of the upload button.
* @group Props
*/
uploadStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the cancel button.
* @group Props
*/
cancelStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the remove button.
* @group Props
*/
removeStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the choose button.
* @group Props
*/
chooseStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Configuration object forwarded to the choose button.
* @group Props
*/
chooseButtonProps: _angular_core.InputSignal<ButtonDirectiveOptions | undefined>;
/**
* Configuration object forwarded to the upload button.
* @group Props
*/
uploadButtonProps: _angular_core.InputSignal<ButtonDirectiveOptions>;
/**
* Configuration object forwarded to the cancel button.
* @group Props
*/
cancelButtonProps: _angular_core.InputSignal<ButtonDirectiveOptions>;
/**
* Callback to invoke before file upload is initialized.
* @param {FileBeforeUploadEvent} event - Custom upload event.
* @group Emits
*/
onBeforeUpload: _angular_core.OutputEmitterRef<FileBeforeUploadEvent>;
/**
* An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
* @param {FileSendEvent} event - Custom send event.
* @group Emits
*/
onSend: _angular_core.OutputEmitterRef<FileSendEvent>;
/**
* Callback to invoke when file upload is complete.
* @param {FileUploadEvent} event - Custom upload event.
* @group Emits
*/
onUpload: _angular_core.OutputEmitterRef<FileUploadEvent>;
/**
* Callback to invoke if file upload fails.
* @param {FileUploadErrorEvent} event - Custom error event.
* @group Emits
*/
onError: _angular_core.OutputEmitterRef<FileUploadErrorEvent>;
/**
* Callback to invoke when files in queue are removed without uploading using clear all button.
* @param {Event} event - Browser event.
* @group Emits
*/
onClear: _angular_core.OutputEmitterRef<void>;
/**
* Callback to invoke when a file is removed without uploading using clear button of a file.
* @param {FileRemoveEvent} event - Remove event.
* @group Emits
*/
onRemove: _angular_core.OutputEmitterRef<FileRemoveEvent>;
/**
* Callback to invoke when files are selected.
* @param {FileSelectEvent} event - Select event.
* @group Emits
*/
onSelect: _angular_core.OutputEmitterRef<FileSelectEvent>;
/**
* Callback to invoke when files are being uploaded.
* @param {FileProgressEvent} event - Progress event.
* @group Emits
*/
onProgress: _angular_core.OutputEmitterRef<FileProgressEvent>;
/**
* Callback to invoke in custom upload mode to upload the files manually.
* @param {FileUploadHandlerEvent} event - Upload handler event.
* @group Emits
*/
uploadHandler: _angular_core.OutputEmitterRef<FileUploadHandlerEvent>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {Event} event - Browser event.
* @group Emits
*/
onImageError: _angular_core.OutputEmitterRef<Event>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {RemoveUploadedFileEvent} event - Remove event.
* @group Emits
*/
onRemoveUploadedFile: _angular_core.OutputEmitterRef<RemoveUploadedFileEvent>;
/**
* Custom file template.
* @group Templates
*/
fileTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom header template.
* @param {FileUploadHeaderTemplateContext} context - header template context.
* @group Templates
*/
headerTemplate: _angular_core.Signal<TemplateRef<FileUploadHeaderTemplateContext> | undefined>;
/**
* Custom content template.
* @param {FileUploadContentTemplateContext} context - content template context.
* @group Templates
*/
contentTemplate: _angular_core.Signal<TemplateRef<FileUploadContentTemplateContext> | undefined>;
/**
* Custom toolbar template.
* @group Templates
*/
toolbarTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom choose icon template.
* @group Templates
*/
chooseIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom file label template.
* @param {FileUploadFileLabelTemplateContext} context - file label template context.
* @group Templates
*/
fileLabelTemplate: _angular_core.Signal<TemplateRef<FileUploadFileLabelTemplateContext> | undefined>;
/**
* Custom upload icon template.
* @group Templates
*/
uploadIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom cancel icon template.
* @group Templates
*/
cancelIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom empty state template.
* @group Templates
*/
emptyTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
isAdvancedMode: _angular_core.Signal<boolean>;
isBasicMode: _angular_core.Signal<boolean>;
showUploadBtn: _angular_core.Signal<boolean>;
showCancelBtn: _angular_core.Signal<boolean>;
chooseButtonDisabled: _angular_core.Signal<boolean | 0 | undefined>;
uploadButtonDisabled: _angular_core.Signal<boolean | 0 | undefined>;
cancelButtonDisabled: _angular_core.Signal<boolean>;
showEmpty: _angular_core.Signal<boolean>;
get headerTemplateContext(): FileUploadHeaderTemplateContext;
get contentTemplateContext(): FileUploadContentTemplateContext;
get fileLabelTemplateContext(): FileUploadFileLabelTemplateContext;
advancedFileInput: _angular_core.Signal<ElementRef<any> | undefined>;
basicFileInput: _angular_core.Signal<ElementRef<any> | undefined>;
contentEl: _angular_core.Signal<ElementRef<any> | undefined>;
/**
* Files input.
* @group Props
*/
filesInput: _angular_core.InputSignal<File[]>;
get files(): File[];
set files(value: File[]);
get basicButtonLabel(): string;
_files: _angular_core.WritableSignal<File[]>;
progress: _angular_core.WritableSignal<number>;
dragHighlight: _angular_core.WritableSignal<boolean>;
msgs: _angular_core.WritableSignal<FileUploadMessage[]>;
uploadedFileCount: number;
focus: _angular_core.WritableSignal<boolean>;
uploading: _angular_core.WritableSignal<boolean>;
duplicateIEEvent: boolean | undefined;
translationSubscription: Subscription | undefined;
dragOverListener: VoidListener;
uploadedFiles: _angular_core.WritableSignal<File[]>;
sanitizer: DomSanitizer;
http: HttpClient;
_componentStyle: FileUploadStyle;
constructor();
onInit(): void;
onAfterViewInit(): void;
basicFileChosenLabel(): any;
completedLabel(): any;
choose(): void;
onFileSelect(event: Event): void;
isFileSelected(file: File): boolean;
isIE11(): boolean | undefined;
validate(file: File): boolean;
private isFileTypeValid;
getTypeClass(fileType: string): string;
isWildcard(fileType: string): boolean;
getFileExtension(file: File): string;
isImage(file: File): boolean;
onImageLoad(img: HTMLImageElement): void;
/**
* Uploads the selected files.
* @group Method
*/
uploader(): void;
onRemoveClick(e: FileContentRemoveEvent): void;
onRemoveUploadedFileClick(e: Pick<FileContentRemoveEvent, 'index'>): void;
/**
* Clears the files list.
* @group Method
*/
clear(): void;
/**
* Removes a single file.
* @param {Event} event - Browser event.
* @param {Number} index - Index of the file.
* @group Method
*/
remove(event: Event, index: number): void;
/**
* Removes uploaded file.
* @param {Number} index - Index of the file to be removed.
* @group Method
*/
removeUploadedFile(index: number): void;
isFileLimitExceeded(): boolean | 0 | undefined;
isChooseDisabled(): boolean | 0 | undefined;
checkFileLimit(files: FileList | File[]): void;
clearInputElement(): void;
clearIEInput(): void;
hasFiles(): boolean;
hasUploadedFiles(): boolean;
getFileTemplateContext(file: File): FileUploadFileTemplateContext;
onDragEnter(e: DragEvent): void;
onDragOver(e: DragEvent): void;
onDragLeave(_event: DragEvent): void;
onDrop(event: DragEvent): void;
onFocus(): void;
onBlur(): void;
formatSize(bytes: number): string;
upload(): void;
onBasicUploaderClick(): void;
onBasicKeydown(event: KeyboardEvent): void;
imageError(event: Event): void;
getBlockableElement(): HTMLElement;
get chooseButtonLabel(): string;
get uploadButtonLabel(): string;
get cancelButtonLabel(): string;
get browseFilesLabel(): string;
get pendingLabel(): any;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUpload, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUpload, "p-fileupload", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "method": { "alias": "method"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "auto": { "alias": "auto"; "required": false; "isSignal": true; }; "withCredentials": { "alias": "withCredentials"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "invalidFileSizeMessageSummary": { "alias": "invalidFileSizeMessageSummary"; "required": false; "isSignal": true; }; "invalidFileSizeMessageDetail": { "alias": "invalidFileSizeMessageDetail"; "required": false; "isSignal": true; }; "invalidFileTypeMessageSummary": { "alias": "invalidFileTypeMessageSummary"; "required": false; "isSignal": true; }; "invalidFileTypeMessageDetail": { "alias": "invalidFileTypeMessageDetail"; "required": false; "isSignal": true; }; "invalidFileLimitMessageDetail": { "alias": "invalidFileLimitMessageDetail"; "required": false; "isSignal": true; }; "invalidFileLimitMessageSummary": { "alias": "invalidFileLimitMessageSummary"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "chooseLabel": { "alias": "chooseLabel"; "required": false; "isSignal": true; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "chooseIcon": { "alias": "chooseIcon"; "required": false; "isSignal": true; }; "uploadIcon": { "alias": "uploadIcon"; "required": false; "isSignal": true; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; "isSignal": true; }; "showUploadButton": { "alias": "showUploadButton"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "headers": { "alias": "headers"; "required": false; "isSignal": true; }; "customUpload": { "alias": "customUpload"; "required": false; "isSignal": true; }; "fileLimit": { "alias": "fileLimit"; "required": false; "isSignal": true; }; "uploadStyleClass": { "alias": "uploadStyleClass"; "required": false; "isSignal": true; }; "cancelStyleClass": { "alias": "cancelStyleClass"; "required": false; "isSignal": true; }; "removeStyleClass": { "alias": "removeStyleClass"; "required": false; "isSignal": true; }; "chooseStyleClass": { "alias": "chooseStyleClass"; "required": false; "isSignal": true; }; "chooseButtonProps": { "alias": "chooseButtonProps"; "required": false; "isSignal": true; }; "uploadButtonProps": { "alias": "uploadButtonProps"; "required": false; "isSignal": true; }; "cancelButtonProps": { "alias": "cancelButtonProps"; "required": false; "isSignal": true; }; "filesInput": { "alias": "files"; "required": false; "isSignal": true; }; }, { "onBeforeUpload": "onBeforeUpload"; "onSend": "onSend"; "onUpload": "onUpload"; "onError": "onError"; "onClear": "onClear"; "onRemove": "onRemove"; "onSelect": "onSelect"; "onProgress": "onProgress"; "uploadHandler": "uploadHandler"; "onImageError": "onImageError"; "onRemoveUploadedFile": "onRemoveUploadedFile"; }, ["fileTemplate", "headerTemplate", "contentTemplate", "toolbarTemplate", "chooseIconTemplate", "fileLabelTemplate", "uploadIconTemplate", "cancelIconTemplate", "emptyTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class FileUploadModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FileUploadModule, never, [typeof FileUpload, typeof i2.SharedModule], [typeof FileUpload, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<FileUploadModule>;
}
export { FileUpload, FileUploadClasses, FileUploadModule, FileUploadStyle };