375 lines
15 KiB
TypeScript
375 lines
15 KiB
TypeScript
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||
|
|
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef } from '@angular/core';
|
||
|
|
import { DomSanitizer } from '@angular/platform-browser';
|
||
|
|
import { BlockableUI, Message, PrimeNGConfig, PrimeTemplate } from 'primeng/api';
|
||
|
|
import { VoidListener } from 'primeng/ts-helpers';
|
||
|
|
import { Subscription } from 'rxjs';
|
||
|
|
import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "@angular/common";
|
||
|
|
import * as i2 from "primeng/api";
|
||
|
|
import * as i3 from "primeng/button";
|
||
|
|
import * as i4 from "primeng/progressbar";
|
||
|
|
import * as i5 from "primeng/messages";
|
||
|
|
import * as i6 from "primeng/ripple";
|
||
|
|
import * as i7 from "primeng/icons/plus";
|
||
|
|
import * as i8 from "primeng/icons/upload";
|
||
|
|
import * as i9 from "primeng/icons/times";
|
||
|
|
/**
|
||
|
|
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export declare class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDestroy, BlockableUI {
|
||
|
|
private document;
|
||
|
|
private platformId;
|
||
|
|
private renderer;
|
||
|
|
private el;
|
||
|
|
sanitizer: DomSanitizer;
|
||
|
|
zone: NgZone;
|
||
|
|
private http;
|
||
|
|
cd: ChangeDetectorRef;
|
||
|
|
config: PrimeNGConfig;
|
||
|
|
/**
|
||
|
|
* 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;
|
||
|
|
/**
|
||
|
|
* 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>;
|
||
|
|
templates: QueryList<PrimeTemplate> | 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: Message[] | undefined;
|
||
|
|
fileTemplate: TemplateRef<any> | undefined;
|
||
|
|
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;
|
||
|
|
uploadedFileCount: number;
|
||
|
|
focus: boolean | undefined;
|
||
|
|
uploading: boolean | undefined;
|
||
|
|
duplicateIEEvent: boolean | undefined;
|
||
|
|
translationSubscription: Subscription | undefined;
|
||
|
|
dragOverListener: VoidListener;
|
||
|
|
uploadedFiles: any[];
|
||
|
|
constructor(document: Document, platformId: any, renderer: Renderer2, el: ElementRef, sanitizer: DomSanitizer, zone: NgZone, http: HttpClient, cd: ChangeDetectorRef, config: PrimeNGConfig);
|
||
|
|
ngAfterContentInit(): void;
|
||
|
|
ngOnInit(): void;
|
||
|
|
ngAfterViewInit(): void;
|
||
|
|
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
|
||
|
|
*/
|
||
|
|
upload(): 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;
|
||
|
|
onDragEnter(e: DragEvent): void;
|
||
|
|
onDragOver(e: DragEvent): void;
|
||
|
|
onDragLeave(event: DragEvent): void;
|
||
|
|
onDrop(event: any): void;
|
||
|
|
onFocus(): void;
|
||
|
|
onBlur(): void;
|
||
|
|
formatSize(bytes: number): string;
|
||
|
|
onBasicUploaderClick(): void;
|
||
|
|
onBasicKeydown(event: KeyboardEvent): void;
|
||
|
|
imageError(event: Event): void;
|
||
|
|
getBlockableElement(): HTMLElement;
|
||
|
|
get chooseButtonLabel(): string;
|
||
|
|
get uploadButtonLabel(): string;
|
||
|
|
get cancelButtonLabel(): string;
|
||
|
|
get browseFilesLabel(): string;
|
||
|
|
ngOnDestroy(): void;
|
||
|
|
static ɵfac: i0.ɵɵFactoryDeclaration<FileUpload, never>;
|
||
|
|
static ɵcmp: i0.ɵɵComponentDeclaration<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; }; "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"; }, ["templates"], never, false, 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;
|
||
|
|
}
|
||
|
|
export declare class FileUploadModule {
|
||
|
|
static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadModule, never>;
|
||
|
|
static ɵmod: i0.ɵɵNgModuleDeclaration<FileUploadModule, [typeof FileUpload], [typeof i1.CommonModule, typeof i2.SharedModule, typeof i3.ButtonModule, typeof i4.ProgressBarModule, typeof i5.MessagesModule, typeof i6.RippleModule, typeof i7.PlusIcon, typeof i8.UploadIcon, typeof i9.TimesIcon], [typeof FileUpload, typeof i2.SharedModule, typeof i3.ButtonModule, typeof i4.ProgressBarModule, typeof i5.MessagesModule]>;
|
||
|
|
static ɵinj: i0.ɵɵInjectorDeclaration<FileUploadModule>;
|
||
|
|
}
|