primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
787 lines (782 loc) • 26.2 kB
TypeScript
import * as i0 from '@angular/core';
import { TemplateRef, AfterViewInit, AfterContentInit, OnInit, OnDestroy, EventEmitter, ElementRef, NgZone, QueryList } from '@angular/core';
import { HttpEvent, HttpHeaders, HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import * as i1 from 'primeng/api';
import { BlockableUI, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { ButtonProps } from 'primeng/button';
import { VoidListener } from 'primeng/ts-helpers';
import { Subscription } from 'rxjs';
import * as _primeuix_styled from '@primeuix/styled';
import { BaseStyle } from 'primeng/base';
/**
* Upload event.
* @group Events
*/
interface UploadEvent {
/**
* HTTP event.
*/
originalEvent: HttpEvent<any>;
}
/**
* Remove uploaded file event.
* @group Events
*/
interface RemoveUploadedFileEvent {
/**
* Removed file.
*/
file: any;
/**
* Uploaded files.
*/
files: any[];
}
/**
* Form data event.
* @group Events
*/
interface FormDataEvent {
/**
* FormData object.
*/
formData: FormData;
}
/**
* 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.
* @see {@link FileUpload.onSend}
* @group Events
*/
interface FileSendEvent extends UploadEvent, FormDataEvent {
}
/**
* Callback to invoke before file upload is initialized.
* @see {@link FileUpload.onBeforeUpload}
* @group Events
*/
interface FileBeforeUploadEvent extends FormDataEvent {
}
/**
* Callback to invoke when file upload is complete.
* @see {@link FileUpload.onUpload}
* @group Events
*/
interface FileUploadEvent extends UploadEvent {
/**
* Uploaded files.
*/
files: File[];
}
/**
* Callback to invoke when a file is removed without uploading using clear button of a file.
* @see {@link FileUpload.onRemove}
* @group Events
*/
interface FileRemoveEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Selected file
*/
file: File;
}
/**
* Callback to invoke when files are selected.
* @see {@link FileUpload.onSelect}
* @group Events
*/
interface FileSelectEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Uploaded files.
*/
files: File[];
/**
* All files to be uploaded.
*/
currentFiles: File[];
}
/**
* Callback to invoke when files are being uploaded.
* @see {@link FileUpload.onProgress}
* @extends {UploadEvent}
* @group Events
*/
interface FileProgressEvent extends UploadEvent {
/**
* Calculated progress value.
*/
progress: number;
}
/**
* Callback to invoke in custom upload mode to upload the files manually.
* @see {@link FileUpload.uploadHandler}
* @group Events
*/
interface FileUploadHandlerEvent {
/**
* List of selected files.
*/
files: File[];
}
/**
* Callback to invoke on upload error.
* @see {@link FileUpload.onError}
* @group Events
*/
interface FileUploadErrorEvent {
/**
* List of selected files.
*/
error?: ErrorEvent;
/**
* List of selected files.
*/
files: File[];
}
/**
* Defines valid templates in FileUpload.
* @group Templates
*/
interface FileUploadTemplates {
/**
* Custom template of file.
*/
file(): TemplateRef<any>;
/**
* Custom file label template.
*/
filelabel(context: {
/**
* File list.
*/
$implicit: any;
}): TemplateRef<any>;
/**
* Custom template of file.
*/
header(context: {
/**
* File list.
*/
$implicit: any;
/**
* Uploaded files list.
*/
uploadedFiles: any;
/**
* Callback to invoke on choose button click.
*/
chooseCallback: VoidFunction;
/**
* Callback to invoke on clear button click.
*/
clearCallback: VoidFunction;
/**
* Callback to invoke on upload.
*/
uploadCallback: VoidFunction;
}): TemplateRef<any>;
/**
* Custom template of content.
*/
content(context: {
/**
* File list.
*/
$implicit: any;
/**
* Uploaded files list.
*/
uploadedFiles: any;
/**
* Upload progress.
*/
progress: any;
/**
* Status messages about upload process.
*/
messages: any;
/**
* Callback to invoke on choose button click.
*/
chooseCallback: VoidFunction;
/**
* Callback to invoke on clear button click.
*/
removeFileCallback: VoidFunction;
/**
* Callback to invoke on clear button click.
*/
clearCallback: VoidFunction;
/**
* Callback to invoke on upload.
*/
uploadCallback: VoidFunction;
/**
* Callback to invoke on remove uploaded file, accepts index as a parameter.
* @param index Index of the file to remove.
*/
removeUploadedFileCallback: VoidFunction;
}): TemplateRef<any>;
/**
* Custom template of toolbar.
*/
toolbar(): TemplateRef<any>;
/**
* Custom template of chooseicon.
*/
chooseicon(): TemplateRef<any>;
/**
* Custom template of uploadicon.
*/
uploadicon(): TemplateRef<any>;
/**
* Custom template of cancelicon.
*/
cancelicon(): TemplateRef<any>;
}
/**
*
* 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;
theme: _primeuix_styled.StyleType;
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: i0.ɵɵFactoryDeclaration<FileUploadStyle, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<FileUploadStyle>;
}
interface FileUploadStyle extends BaseStyle {
}
declare class FileContent extends BaseComponent {
_componentStyle: FileUploadStyle;
onRemove: i0.OutputEmitterRef<any>;
files: i0.InputSignal<any>;
badgeSeverity: i0.InputSignal<"secondary" | "info" | "success" | "warn" | "danger" | "contrast">;
badgeValue: i0.InputSignal<string>;
previewWidth: i0.InputSignal<number>;
fileRemoveIconTemplate: i0.InputSignal<any>;
onRemoveClick(event: any, index: number): void;
formatSize(bytes: number): string;
static ɵfac: i0.ɵɵFactoryDeclaration<FileContent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FileContent, "[pFileContent]", never, { "files": { "alias": "files"; "required": false; "isSignal": true; }; "badgeSeverity": { "alias": "badgeSeverity"; "required": false; "isSignal": true; }; "badgeValue": { "alias": "badgeValue"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "fileRemoveIconTemplate": { "alias": "fileRemoveIconTemplate"; "required": false; "isSignal": true; }; }, { "onRemove": "onRemove"; }, never, never, true, never>;
}
/**
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
* @group Components
*/
declare class FileUpload extends BaseComponent implements AfterViewInit, AfterContentInit, OnInit, OnDestroy, BlockableUI {
/**
* Name of the request parameter to identify the files at backend.
* @group Props
*/
name: string | undefined;
/**
* Remote url to upload the files.
* @group Props
*/
url: string | undefined;
/**
* HTTP method to send the files to the url such as "post" and "put".
* @group Props
*/
method: 'post' | 'put' | undefined;
/**
* Used to select multiple files at once from file dialog.
* @group Props
*/
multiple: boolean | undefined;
/**
* 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: string | undefined;
/**
* Disables the upload functionality.
* @group Props
*/
disabled: boolean | undefined;
/**
* When enabled, upload begins automatically after selection is completed.
* @group Props
*/
auto: boolean | undefined;
/**
* Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
* @group Props
*/
withCredentials: boolean | undefined;
/**
* Maximum file size allowed in bytes.
* @group Props
*/
maxFileSize: number | undefined;
/**
* Summary message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageSummary: string;
/**
* Detail message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageDetail: string;
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageSummary: string;
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageDetail: string;
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageDetail: string;
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageSummary: string;
/**
* Inline style of the element.
* @group Props
*/
style: {
[klass: string]: any;
} | null | undefined;
/**
* Class of the element.
* @group Props
*/
styleClass: string | undefined;
/**
* Width of the image thumbnail in pixels.
* @group Props
*/
previewWidth: number;
/**
* Label of the choose button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
chooseLabel: string | undefined;
/**
* Label of the upload button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
uploadLabel: string | undefined;
/**
* Label of the cancel button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
cancelLabel: string | undefined;
/**
* Icon of the choose button.
* @group Props
*/
chooseIcon: string | undefined;
/**
* Icon of the upload button.
* @group Props
*/
uploadIcon: string | undefined;
/**
* Icon of the cancel button.
* @group Props
*/
cancelIcon: string | undefined;
/**
* Whether to show the upload button.
* @group Props
*/
showUploadButton: boolean;
/**
* Whether to show the cancel button.
* @group Props
*/
showCancelButton: boolean;
/**
* Defines the UI of the component.
* @group Props
*/
mode: 'advanced' | 'basic' | undefined;
/**
* HttpHeaders class represents the header configuration options for an HTTP request.
* @group Props
*/
headers: HttpHeaders | undefined;
/**
* Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration.
* @group Props
*/
customUpload: boolean | undefined;
/**
* Maximum number of files that can be uploaded.
* @group Props
*/
fileLimit: number | undefined;
/**
* Style class of the upload button.
* @group Props
*/
uploadStyleClass: string | undefined;
/**
* Style class of the cancel button.
* @group Props
*/
cancelStyleClass: string | undefined;
/**
* Style class of the remove button.
* @group Props
*/
removeStyleClass: string | undefined;
/**
* Style class of the choose button.
* @group Props
*/
chooseStyleClass: string | undefined;
/**
* Used to pass all properties of the ButtonProps to the choose button inside the component.
* @group Props
*/
chooseButtonProps: ButtonProps;
/**
* Used to pass all properties of the ButtonProps to the upload button inside the component.
* @group Props
*/
uploadButtonProps: ButtonProps;
/**
* Used to pass all properties of the ButtonProps to the cancel button inside the component.
* @group Props
*/
cancelButtonProps: ButtonProps;
/**
* Callback to invoke before file upload is initialized.
* @param {FileBeforeUploadEvent} event - Custom upload event.
* @group Emits
*/
onBeforeUpload: EventEmitter<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: EventEmitter<FileSendEvent>;
/**
* Callback to invoke when file upload is complete.
* @param {FileUploadEvent} event - Custom upload event.
* @group Emits
*/
onUpload: EventEmitter<FileUploadEvent>;
/**
* Callback to invoke if file upload fails.
* @param {FileUploadErrorEvent} event - Custom error event.
* @group Emits
*/
onError: EventEmitter<FileUploadErrorEvent>;
/**
* Callback to invoke when files in queue are removed without uploading using clear all button.
* @param {Event} event - Browser event.
* @group Emits
*/
onClear: EventEmitter<Event>;
/**
* Callback to invoke when a file is removed without uploading using clear button of a file.
* @param {FileRemoveEvent} event - Remove event.
* @group Emits
*/
onRemove: EventEmitter<FileRemoveEvent>;
/**
* Callback to invoke when files are selected.
* @param {FileSelectEvent} event - Select event.
* @group Emits
*/
onSelect: EventEmitter<FileSelectEvent>;
/**
* Callback to invoke when files are being uploaded.
* @param {FileProgressEvent} event - Progress event.
* @group Emits
*/
onProgress: EventEmitter<FileProgressEvent>;
/**
* Callback to invoke in custom upload mode to upload the files manually.
* @param {FileUploadHandlerEvent} event - Upload handler event.
* @group Emits
*/
uploadHandler: EventEmitter<FileUploadHandlerEvent>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {Event} event - Browser event.
* @group Emits
*/
onImageError: EventEmitter<Event>;
/**
* This event is triggered if an error occurs while loading an image file.
* @param {RemoveUploadedFileEvent} event - Remove event.
* @group Emits
*/
onRemoveUploadedFile: EventEmitter<RemoveUploadedFileEvent>;
/**
* Template for file.
* @group Templates
*/
fileTemplate: TemplateRef<any> | undefined;
/**
* Template for header.
* @group Templates
*/
headerTemplate: TemplateRef<any> | undefined;
/**
* Template for content.
* @group Templates
*/
contentTemplate: TemplateRef<any> | undefined;
/**
* Template for toolbar.
* @group Templates
*/
toolbarTemplate: TemplateRef<any> | undefined;
/**
* Template for choose icon.
* @group Templates
*/
chooseIconTemplate: TemplateRef<any> | undefined;
/**
* Template for file label.
* @group Templates
*/
fileLabelTemplate: TemplateRef<any> | undefined;
/**
* Template for upload icon.
* @group Templates
*/
uploadIconTemplate: TemplateRef<any> | undefined;
/**
* Template for cancel icon.
* @group Templates
*/
cancelIconTemplate: TemplateRef<any> | undefined;
/**
* Template for empty state.
* @group Templates
*/
emptyTemplate: TemplateRef<any> | undefined;
advancedFileInput: ElementRef | undefined | any;
basicFileInput: ElementRef | undefined;
content: ElementRef | undefined;
set files(files: File[]);
get files(): File[];
get basicButtonLabel(): string;
_files: File[];
progress: number;
dragHighlight: boolean | undefined;
msgs: any[] | undefined;
uploadedFileCount: number;
focus: boolean | undefined;
uploading: boolean | undefined;
duplicateIEEvent: boolean | undefined;
translationSubscription: Subscription | undefined;
dragOverListener: VoidListener;
uploadedFiles: any[];
sanitizer: DomSanitizer;
zone: NgZone;
http: HttpClient;
_componentStyle: FileUploadStyle;
ngOnInit(): void;
ngAfterViewInit(): void;
_headerTemplate: TemplateRef<any> | undefined;
_contentTemplate: TemplateRef<any> | undefined;
_toolbarTemplate: TemplateRef<any> | undefined;
_chooseIconTemplate: TemplateRef<any> | undefined;
_uploadIconTemplate: TemplateRef<any> | undefined;
_cancelIconTemplate: TemplateRef<any> | undefined;
_emptyTemplate: TemplateRef<any> | undefined;
_fileTemplate: TemplateRef<any> | undefined;
_fileLabelTemplate: TemplateRef<any> | undefined;
templates: QueryList<PrimeTemplate> | undefined;
ngAfterContentInit(): void;
basicFileChosenLabel(): any;
completedLabel(): any;
getTranslation(option: string): any;
choose(): void;
onFileSelect(event: any): void;
isFileSelected(file: File): boolean;
isIE11(): boolean;
validate(file: File): boolean;
private isFileTypeValid;
getTypeClass(fileType: string): string;
isWildcard(fileType: string): boolean;
getFileExtension(file: File): string;
isImage(file: File): boolean;
onImageLoad(img: any): void;
/**
* Uploads the selected files.
* @group Method
*/
uploader(): void;
onRemoveClick(e: any): void;
onRemoveUploadedFileClick(e: any): 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: any): void;
isFileLimitExceeded(): boolean;
isChooseDisabled(): boolean;
checkFileLimit(files: File[]): void;
clearInputElement(): void;
clearIEInput(): void;
hasFiles(): boolean;
hasUploadedFiles(): boolean;
onDragEnter(e: DragEvent): void;
onDragOver(e: DragEvent): void;
onDragLeave(event: DragEvent): void;
onDrop(event: any): 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;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<FileUpload, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FileUpload, "p-fileupload, p-fileUpload", never, { "name": { "alias": "name"; "required": false; }; "url": { "alias": "url"; "required": false; }; "method": { "alias": "method"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "auto": { "alias": "auto"; "required": false; }; "withCredentials": { "alias": "withCredentials"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "invalidFileSizeMessageSummary": { "alias": "invalidFileSizeMessageSummary"; "required": false; }; "invalidFileSizeMessageDetail": { "alias": "invalidFileSizeMessageDetail"; "required": false; }; "invalidFileTypeMessageSummary": { "alias": "invalidFileTypeMessageSummary"; "required": false; }; "invalidFileTypeMessageDetail": { "alias": "invalidFileTypeMessageDetail"; "required": false; }; "invalidFileLimitMessageDetail": { "alias": "invalidFileLimitMessageDetail"; "required": false; }; "invalidFileLimitMessageSummary": { "alias": "invalidFileLimitMessageSummary"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "previewWidth": { "alias": "previewWidth"; "required": false; }; "chooseLabel": { "alias": "chooseLabel"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "chooseIcon": { "alias": "chooseIcon"; "required": false; }; "uploadIcon": { "alias": "uploadIcon"; "required": false; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; }; "showUploadButton": { "alias": "showUploadButton"; "required": false; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "headers": { "alias": "headers"; "required": false; }; "customUpload": { "alias": "customUpload"; "required": false; }; "fileLimit": { "alias": "fileLimit"; "required": false; }; "uploadStyleClass": { "alias": "uploadStyleClass"; "required": false; }; "cancelStyleClass": { "alias": "cancelStyleClass"; "required": false; }; "removeStyleClass": { "alias": "removeStyleClass"; "required": false; }; "chooseStyleClass": { "alias": "chooseStyleClass"; "required": false; }; "chooseButtonProps": { "alias": "chooseButtonProps"; "required": false; }; "uploadButtonProps": { "alias": "uploadButtonProps"; "required": false; }; "cancelButtonProps": { "alias": "cancelButtonProps"; "required": false; }; "files": { "alias": "files"; "required": false; }; }, { "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", "templates"], never, true, never>;
static ngAcceptInputType_multiple: unknown;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_auto: unknown;
static ngAcceptInputType_withCredentials: unknown;
static ngAcceptInputType_maxFileSize: unknown;
static ngAcceptInputType_previewWidth: unknown;
static ngAcceptInputType_showUploadButton: unknown;
static ngAcceptInputType_showCancelButton: unknown;
static ngAcceptInputType_customUpload: unknown;
static ngAcceptInputType_fileLimit: unknown;
}
declare class FileUploadModule {
static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<FileUploadModule, never, [typeof FileUpload, typeof i1.SharedModule], [typeof FileUpload, typeof i1.SharedModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<FileUploadModule>;
}
export { FileContent, FileUpload, FileUploadClasses, FileUploadModule, FileUploadStyle };
export type { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, FileUploadTemplates, FormDataEvent, RemoveUploadedFileEvent, UploadEvent };