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
1,577 lines • 76.1 kB
JavaScript
export * from 'primeng/types/fileupload';
import * as i1 from '@angular/common';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { HttpClient, HttpEventType } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, output, input, ChangeDetectionStrategy, Component, EventEmitter, NgZone, numberAttribute, booleanAttribute, ContentChildren, Input, ViewChild, ContentChild, Output, ViewEncapsulation, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { addClass, removeClass } from '@primeuix/utils';
import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
import { Badge } from 'primeng/badge';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i2 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Button } from 'primeng/button';
import { TimesIcon, PlusIcon, UploadIcon } from 'primeng/icons';
import { Message } from 'primeng/message';
import { ProgressBar } from 'primeng/progressbar';
import { style } from '@primeuix/styles/fileupload';
import { BaseStyle } from 'primeng/base';
const classes = {
root: ({ instance }) => `p-fileupload p-fileupload-${instance.mode} p-component`,
header: 'p-fileupload-header',
pcChooseButton: 'p-fileupload-choose-button',
pcUploadButton: 'p-fileupload-upload-button',
pcCancelButton: 'p-fileupload-cancel-button',
content: 'p-fileupload-content',
fileList: 'p-fileupload-file-list',
file: 'p-fileupload-file',
fileThumbnail: 'p-fileupload-file-thumbnail',
fileInfo: 'p-fileupload-file-info',
fileName: 'p-fileupload-file-name',
fileSize: 'p-fileupload-file-size',
pcFileBadge: 'p-fileupload-file-badge',
fileActions: 'p-fileupload-file-actions',
pcFileRemoveButton: 'p-fileupload-file-remove-button',
basicContent: 'p-fileupload-basic-content'
};
class FileUploadStyle extends BaseStyle {
name = 'fileupload';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadStyle, decorators: [{
type: Injectable
}] });
/**
*
* 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
*
*/
var FileUploadClasses;
(function (FileUploadClasses) {
/**
* Class name of the root element
*/
FileUploadClasses["root"] = "p-fileupload";
/**
* Class name of the header element
*/
FileUploadClasses["header"] = "p-fileupload-header";
/**
* Class name of the choose button element
*/
FileUploadClasses["pcChooseButton"] = "p-fileupload-choose-button";
/**
* Class name of the upload button element
*/
FileUploadClasses["pcUploadButton"] = "p-fileupload-upload-button";
/**
* Class name of the cancel button element
*/
FileUploadClasses["pcCancelButton"] = "p-fileupload-cancel-button";
/**
* Class name of the content element
*/
FileUploadClasses["content"] = "p-fileupload-content";
/**
* Class name of the file list element
*/
FileUploadClasses["fileList"] = "p-fileupload-file-list";
/**
* Class name of the file element
*/
FileUploadClasses["file"] = "p-fileupload-file";
/**
* Class name of the file thumbnail element
*/
FileUploadClasses["fileThumbnail"] = "p-fileupload-file-thumbnail";
/**
* Class name of the file info element
*/
FileUploadClasses["fileInfo"] = "p-fileupload-file-info";
/**
* Class name of the file name element
*/
FileUploadClasses["fileName"] = "p-fileupload-file-name";
/**
* Class name of the file size element
*/
FileUploadClasses["fileSize"] = "p-fileupload-file-size";
/**
* Class name of the file badge element
*/
FileUploadClasses["pcFileBadge"] = "p-fileupload-file-badge";
/**
* Class name of the file actions element
*/
FileUploadClasses["fileActions"] = "p-fileupload-file-actions";
/**
* Class name of the file remove button element
*/
FileUploadClasses["pcFileRemoveButton"] = "p-fileupload-file-remove-button";
/**
* Class name of the content in basic mode
*/
FileUploadClasses["basicContent"] = "p-fileupload-basic-content";
})(FileUploadClasses || (FileUploadClasses = {}));
const FILEUPLOAD_INSTANCE = new InjectionToken('FILEUPLOAD_INSTANCE');
class FileContent extends BaseComponent {
_componentStyle = inject(FileUploadStyle);
$pcFileUpload = inject(FILEUPLOAD_INSTANCE);
onRemove = output();
files = input(...(ngDevMode ? [undefined, { debugName: "files" }] : []));
badgeSeverity = input('warn', ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : []));
badgeValue = input(...(ngDevMode ? [undefined, { debugName: "badgeValue" }] : []));
previewWidth = input(50, ...(ngDevMode ? [{ debugName: "previewWidth" }] : []));
fileRemoveIconTemplate = input(...(ngDevMode ? [undefined, { debugName: "fileRemoveIconTemplate" }] : []));
onRemoveClick(event, index) {
this.onRemove.emit({ event, index });
}
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.config.getTranslation(TranslationKeys.FILE_SIZE_TYPES);
if (bytes === 0) {
return `0 ${sizes[0]}`;
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
return `${formattedSize} ${sizes[i]}`;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: FileContent, isStandalone: true, selector: "[pFileContent]", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, fileRemoveIconTemplate: { classPropertyName: "fileRemoveIconTemplate", publicName: "fileRemoveIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, providers: [FileUploadStyle], usesInheritance: true, ngImport: i0, template: `@for (file of files(); track file?.name + '-' + $index; let index = $index) {
<div [class]="cx('file')" [pBind]="$pcFileUpload.ptm('file')">
<img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" [pBind]="$pcFileUpload.ptm('fileThumbnail')" />
<div [class]="cx('fileInfo')" [pBind]="$pcFileUpload.ptm('fileInfo')">
<div [class]="cx('fileName')" [pBind]="$pcFileUpload.ptm('fileName')">{{ file.name }}</div>
<span [class]="cx('fileSize')" [pBind]="$pcFileUpload.ptm('fileSize')">{{ formatSize(file.size) }}</span>
</div>
<p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" [pt]="$pcFileUpload.ptm('pcFileBadge')" [unstyled]="unstyled()" />
<div [class]="cx('fileActions')" [pBind]="$pcFileUpload.ptm('fileActions')">
<p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger" [pt]="$pcFileUpload.ptm('pcFileRemoveButton')" [unstyled]="unstyled()">
<ng-template #icon let-iconClass="class">
@if (fileRemoveIconTemplate()) {
<ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
} @else {
<svg data-p-icon="times" [class]="iconClass" [attr.aria-hidden]="true" />
}
</ng-template>
</p-button>
</div>
</div>
}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileContent, decorators: [{
type: Component,
args: [{
selector: '[pFileContent]',
standalone: true,
template: `@for (file of files(); track file?.name + '-' + $index; let index = $index) {
<div [class]="cx('file')" [pBind]="$pcFileUpload.ptm('file')">
<img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" [pBind]="$pcFileUpload.ptm('fileThumbnail')" />
<div [class]="cx('fileInfo')" [pBind]="$pcFileUpload.ptm('fileInfo')">
<div [class]="cx('fileName')" [pBind]="$pcFileUpload.ptm('fileName')">{{ file.name }}</div>
<span [class]="cx('fileSize')" [pBind]="$pcFileUpload.ptm('fileSize')">{{ formatSize(file.size) }}</span>
</div>
<p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" [pt]="$pcFileUpload.ptm('pcFileBadge')" [unstyled]="unstyled()" />
<div [class]="cx('fileActions')" [pBind]="$pcFileUpload.ptm('fileActions')">
<p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger" [pt]="$pcFileUpload.ptm('pcFileRemoveButton')" [unstyled]="unstyled()">
<ng-template #icon let-iconClass="class">
@if (fileRemoveIconTemplate()) {
<ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
} @else {
<svg data-p-icon="times" [class]="iconClass" [attr.aria-hidden]="true" />
}
</ng-template>
</p-button>
</div>
</div>
}`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [FileUploadStyle],
imports: [CommonModule, Badge, Button, TimesIcon, Bind]
}]
}], propDecorators: { onRemove: [{ type: i0.Output, args: ["onRemove"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], badgeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeValue", required: false }] }], previewWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewWidth", required: false }] }], fileRemoveIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileRemoveIconTemplate", required: false }] }] } });
/**
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
* @group Components
*/
class FileUpload extends BaseComponent {
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* Name of the request parameter to identify the files at backend.
* @group Props
*/
name;
/**
* Remote url to upload the files.
* @group Props
*/
url;
/**
* HTTP method to send the files to the url such as "post" and "put".
* @group Props
*/
method = 'post';
/**
* Used to select multiple files at once from file dialog.
* @group Props
*/
multiple;
/**
* 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;
/**
* Disables the upload functionality.
* @group Props
*/
disabled;
/**
* When enabled, upload begins automatically after selection is completed.
* @group Props
*/
auto;
/**
* Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
* @group Props
*/
withCredentials;
/**
* Maximum file size allowed in bytes.
* @group Props
*/
maxFileSize;
/**
* Summary message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageSummary = '{0}: Invalid file size, ';
/**
* Detail message of the invalid file size.
* @group Props
*/
invalidFileSizeMessageDetail = 'maximum upload size is {0}.';
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageSummary = '{0}: Invalid file type, ';
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileTypeMessageDetail = 'allowed file types: {0}.';
/**
* Detail message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageDetail = 'limit is {0} at most.';
/**
* Summary message of the invalid file type.
* @group Props
*/
invalidFileLimitMessageSummary = 'Maximum number of files exceeded, ';
/**
* Inline style of the element.
* @group Props
*/
style;
/**
* Class of the element.
* @group Props
*/
styleClass;
/**
* Width of the image thumbnail in pixels.
* @group Props
*/
previewWidth = 50;
/**
* Label of the choose button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
chooseLabel;
/**
* Label of the upload button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
uploadLabel;
/**
* Label of the cancel button. Defaults to PrimeNG Locale configuration.
* @group Props
*/
cancelLabel;
/**
* Icon of the choose button.
* @group Props
*/
chooseIcon;
/**
* Icon of the upload button.
* @group Props
*/
uploadIcon;
/**
* Icon of the cancel button.
* @group Props
*/
cancelIcon;
/**
* Whether to show the upload button.
* @group Props
*/
showUploadButton = true;
/**
* Whether to show the cancel button.
* @group Props
*/
showCancelButton = true;
/**
* Defines the UI of the component.
* @group Props
*/
mode = 'advanced';
/**
* HttpHeaders class represents the header configuration options for an HTTP request.
* @group Props
*/
headers;
/**
* Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration.
* @group Props
*/
customUpload;
/**
* Maximum number of files that can be uploaded.
* @group Props
*/
fileLimit;
/**
* Style class of the upload button.
* @group Props
*/
uploadStyleClass;
/**
* Style class of the cancel button.
* @group Props
*/
cancelStyleClass;
/**
* Style class of the remove button.
* @group Props
*/
removeStyleClass;
/**
* Style class of the choose button.
* @group Props
*/
chooseStyleClass;
/**
* Used to pass all properties of the ButtonProps to the choose button inside the component.
* @group Props
*/
chooseButtonProps;
/**
* Used to pass all properties of the ButtonProps to the upload button inside the component.
* @group Props
*/
uploadButtonProps = { severity: 'secondary' };
/**
* Used to pass all properties of the ButtonProps to the cancel button inside the component.
* @group Props
*/
cancelButtonProps = { severity: 'secondary' };
/**
* Callback to invoke before file upload is initialized.
* @param {FileBeforeUploadEvent} event - Custom upload event.
* @group Emits
*/
onBeforeUpload = new EventEmitter();
/**
* 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 = new EventEmitter();
/**
* Callback to invoke when file upload is complete.
* @param {FileUploadEvent} event - Custom upload event.
* @group Emits
*/
onUpload = new EventEmitter();
/**
* Callback to invoke if file upload fails.
* @param {FileUploadErrorEvent} event - Custom error event.
* @group Emits
*/
onError = new EventEmitter();
/**
* Callback to invoke when files in queue are removed without uploading using clear all button.
* @param {Event} event - Browser event.
* @group Emits
*/
onClear = new EventEmitter();
/**
* Callback to invoke when a file is removed without uploading using clear button of a file.
* @param {FileRemoveEvent} event - Remove event.
* @group Emits
*/
onRemove = new EventEmitter();
/**
* Callback to invoke when files are selected.
* @param {FileSelectEvent} event - Select event.
* @group Emits
*/
onSelect = new EventEmitter();
/**
* Callback to invoke when files are being uploaded.
* @param {FileProgressEvent} event - Progress event.
* @group Emits
*/
onProgress = new EventEmitter();
/**
* Callback to invoke in custom upload mode to upload the files manually.
* @param {FileUploadHandlerEvent} event - Upload handler event.
* @group Emits
*/
uploadHandler = new EventEmitter();
/**
* This event is triggered if an error occurs while loading an image file.
* @param {Event} event - Browser event.
* @group Emits
*/
onImageError = new EventEmitter();
/**
* This event is triggered if an error occurs while loading an image file.
* @param {RemoveUploadedFileEvent} event - Remove event.
* @group Emits
*/
onRemoveUploadedFile = new EventEmitter();
/**
* Custom file template.
* @group Templates
*/
fileTemplate;
/**
* Custom header template.
* @param {FileUploadHeaderTemplateContext} context - header template context.
* @group Templates
*/
headerTemplate;
/**
* Custom content template.
* @param {FileUploadContentTemplateContext} context - content template context.
* @group Templates
*/
contentTemplate;
/**
* Custom toolbar template.
* @group Templates
*/
toolbarTemplate;
/**
* Custom choose icon template.
* @group Templates
*/
chooseIconTemplate;
/**
* Custom file label template.
* @param {FileUploadFileLabelTemplateContext} context - file label template context.
* @group Templates
*/
fileLabelTemplate;
/**
* Custom upload icon template.
* @group Templates
*/
uploadIconTemplate;
/**
* Custom cancel icon template.
* @group Templates
*/
cancelIconTemplate;
/**
* Custom empty state template.
* @group Templates
*/
emptyTemplate;
advancedFileInput;
basicFileInput;
content;
set files(files) {
this._files = [];
for (let i = 0; i < files.length; i++) {
let file = files[i];
if (this.validate(file)) {
if (this.isImage(file)) {
file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
}
this._files.push(files[i]);
}
}
}
get files() {
return this._files;
}
get basicButtonLabel() {
if (this.auto || !this.hasFiles()) {
return this.chooseLabel;
}
return this.uploadLabel ?? this.files[0].name;
}
_files = [];
progress = 0;
dragHighlight;
msgs;
uploadedFileCount = 0;
focus;
uploading;
duplicateIEEvent; // flag to recognize duplicate onchange event for file input
translationSubscription;
dragOverListener;
uploadedFiles = [];
sanitizer = inject(DomSanitizer);
zone = inject(NgZone);
http = inject(HttpClient);
_componentStyle = inject(FileUploadStyle);
onInit() {
this.translationSubscription = this.config.translationObserver.subscribe(() => {
this.cd.markForCheck();
});
}
onAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
if (this.mode === 'advanced') {
this.zone.runOutsideAngular(() => {
if (this.content) {
this.dragOverListener = this.renderer.listen(this.content.nativeElement, 'dragover', this.onDragOver.bind(this));
}
});
}
}
}
_headerTemplate;
_contentTemplate;
_toolbarTemplate;
_chooseIconTemplate;
_uploadIconTemplate;
_cancelIconTemplate;
_emptyTemplate;
_fileTemplate;
_fileLabelTemplate;
templates;
onAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'header':
this._headerTemplate = item.template;
break;
case 'file':
this._fileTemplate = item.template;
break;
case 'content':
this._contentTemplate = item.template;
break;
case 'toolbar':
this._toolbarTemplate = item.template;
break;
case 'chooseicon':
this._chooseIconTemplate = item.template;
break;
case 'uploadicon':
this._uploadIconTemplate = item.template;
break;
case 'cancelicon':
this._cancelIconTemplate = item.template;
break;
case 'empty':
this._emptyTemplate = item.template;
break;
case 'filelabel':
this._fileLabelTemplate = item.template;
break;
default:
this._fileTemplate = item.template;
break;
}
});
}
basicFileChosenLabel() {
if (this.auto)
return this.chooseButtonLabel;
else if (this.hasFiles()) {
if (this.files && this.files.length === 1)
return this.files[0].name;
return this.config.getTranslation('fileChosenMessage')?.replace('{0}', this.files.length);
}
return this.config.getTranslation('noFileChosenMessage') || '';
}
completedLabel() {
return this.config.getTranslation('completed') || '';
}
getTranslation(option) {
return this.config.getTranslation(option);
}
choose() {
this.advancedFileInput?.nativeElement.click();
}
onFileSelect(event) {
if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
this.duplicateIEEvent = false;
return;
}
if (!this.multiple) {
this.files = [];
}
this.msgs = [];
this.files = this.files || [];
let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
for (let i = 0; i < files.length; i++) {
let file = files[i];
if (!this.isFileSelected(file)) {
if (this.validate(file)) {
if (this.isImage(file)) {
file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
}
this.files.push(files[i]);
}
}
}
this.onSelect.emit({ originalEvent: event, files: files, currentFiles: this.files });
// this will check the fileLimit with the uploaded files
this.checkFileLimit(files);
if (this.hasFiles() && this.auto && (this.mode !== 'advanced' || !this.isFileLimitExceeded())) {
this.upload();
}
if (event.type !== 'drop' && this.isIE11()) {
this.clearIEInput();
}
else {
this.clearInputElement();
}
}
isFileSelected(file) {
for (let sFile of this.files) {
if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) {
return true;
}
}
return false;
}
isIE11() {
if (isPlatformBrowser(this.platformId)) {
return !!this.document.defaultView['MSInputMethodContext'] && !!this.document['documentMode'];
}
}
validate(file) {
this.msgs = this.msgs || [];
if (this.accept && !this.isFileTypeValid(file)) {
const text = `${this.invalidFileTypeMessageSummary.replace('{0}', file.name)} ${this.invalidFileTypeMessageDetail.replace('{0}', this.accept)}`;
this.msgs.push({
severity: 'error',
text: text
});
return false;
}
if (this.maxFileSize && file.size > this.maxFileSize) {
const text = `${this.invalidFileSizeMessageSummary.replace('{0}', file.name)} ${this.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.maxFileSize))}`;
this.msgs.push({
severity: 'error',
text: text
});
return false;
}
return true;
}
isFileTypeValid(file) {
let acceptableTypes = this.accept?.split(',').map((type) => type.trim());
for (let type of acceptableTypes) {
let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type) : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
if (acceptable) {
return true;
}
}
return false;
}
getTypeClass(fileType) {
return fileType.substring(0, fileType.indexOf('/'));
}
isWildcard(fileType) {
return fileType.indexOf('*') !== -1;
}
getFileExtension(file) {
return '.' + file.name.split('.').pop();
}
isImage(file) {
return /^image\//.test(file.type);
}
onImageLoad(img) {
window.URL.revokeObjectURL(img.src);
}
/**
* Uploads the selected files.
* @group Method
*/
uploader() {
if (this.customUpload) {
if (this.fileLimit) {
this.uploadedFileCount += this.files.length;
}
this.uploadHandler.emit({
files: this.files
});
this.cd.markForCheck();
}
else {
this.uploading = true;
this.msgs = [];
let formData = new FormData();
this.onBeforeUpload.emit({
formData: formData
});
for (let i = 0; i < this.files.length; i++) {
formData.append(this.name, this.files[i], this.files[i].name);
}
this.http
.request(this.method, this.url, {
body: formData,
headers: this.headers,
reportProgress: true,
observe: 'events',
withCredentials: this.withCredentials
})
.subscribe((event) => {
switch (event.type) {
case HttpEventType.Sent:
this.onSend.emit({
originalEvent: event,
formData: formData
});
break;
case HttpEventType.Response:
this.uploading = false;
this.progress = 0;
if (event['status'] >= 200 && event['status'] < 300) {
if (this.fileLimit) {
this.uploadedFileCount += this.files.length;
}
this.onUpload.emit({ originalEvent: event, files: this.files });
}
else {
this.onError.emit({ files: this.files });
}
this.uploadedFiles = [...this.uploadedFiles, ...this.files];
this.clear();
break;
case HttpEventType.UploadProgress: {
if (event['loaded']) {
this.progress = Math.round((event['loaded'] * 100) / event['total']);
}
this.onProgress.emit({ originalEvent: event, progress: this.progress });
break;
}
}
this.cd.markForCheck();
}, (error) => {
this.uploading = false;
this.onError.emit({ files: this.files, error: error });
});
}
}
onRemoveClick(e) {
const { event, index } = e;
if (this.hasFiles()) {
this.remove(event, index);
}
}
onRemoveUploadedFileClick(e) {
const { index } = e;
if (this.hasUploadedFiles()) {
this.removeUploadedFile(index);
}
}
/**
* Clears the files list.
* @group Method
*/
clear() {
this.files = [];
this.onClear.emit();
this.clearInputElement();
this.msgs = [];
this.cd.markForCheck();
}
/**
* Removes a single file.
* @param {Event} event - Browser event.
* @param {Number} index - Index of the file.
* @group Method
*/
remove(event, index) {
this.clearInputElement();
this.onRemove.emit({ originalEvent: event, file: this.files[index] });
this.files.splice(index, 1);
this.checkFileLimit(this.files);
}
/**
* Removes uploaded file.
* @param {Number} index - Index of the file to be removed.
* @group Method
*/
removeUploadedFile(index) {
let removedFile = this.uploadedFiles.splice(index, 1)[0];
this.uploadedFiles = [...this.uploadedFiles];
this.onRemoveUploadedFile.emit({ file: removedFile, files: this.uploadedFiles });
}
isFileLimitExceeded() {
const isAutoMode = this.auto;
const totalFileCount = isAutoMode ? this.files.length : this.files.length + this.uploadedFileCount;
if (this.fileLimit && this.fileLimit <= totalFileCount && this.focus) {
this.focus = false;
}
return this.fileLimit && this.fileLimit < totalFileCount;
}
isChooseDisabled() {
if (this.auto) {
return this.fileLimit && this.fileLimit <= this.files.length;
}
else {
return this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount;
}
}
checkFileLimit(files) {
this.msgs ??= [];
const hasExistingValidationMessages = this.msgs.length > 0 && this.fileLimit && this.fileLimit < files.length;
if (this.isFileLimitExceeded() || hasExistingValidationMessages) {
const text = `${this.invalidFileLimitMessageSummary.replace('{0}', this.fileLimit.toString())} ${this.invalidFileLimitMessageDetail.replace('{0}', this.fileLimit.toString())}`;
this.msgs.push({
severity: 'error',
text: text
});
}
else {
this.msgs = this.msgs.filter((msg) => !msg.text.includes(this.invalidFileLimitMessageSummary));
}
}
clearInputElement() {
if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
this.advancedFileInput.nativeElement.value = '';
}
if (this.basicFileInput && this.basicFileInput.nativeElement) {
this.basicFileInput.nativeElement.value = '';
}
}
clearIEInput() {
if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
this.advancedFileInput.nativeElement.value = '';
}
}
hasFiles() {
return this.files && this.files.length > 0;
}
hasUploadedFiles() {
return this.uploadedFiles && this.uploadedFiles.length > 0;
}
onDragEnter(e) {
if (!this.disabled) {
e.stopPropagation();
e.preventDefault();
}
}
onDragOver(e) {
if (!this.disabled) {
!this.$unstyled() && addClass(this.content?.nativeElement, 'p-fileupload-highlight');
this.content?.nativeElement.setAttribute('data-p-highlight', true);
this.dragHighlight = true;
e.stopPropagation();
e.preventDefault();
}
}
onDragLeave(event) {
if (!this.disabled) {
!this.$unstyled() && removeClass(this.content?.nativeElement, 'p-fileupload-highlight');
this.content?.nativeElement.setAttribute('data-p-highlight', false);
}
}
onDrop(event) {
if (!this.disabled) {
!this.$unstyled() && removeClass(this.content?.nativeElement, 'p-fileupload-highlight');
this.content?.nativeElement.setAttribute('data-p-highlight', false);
event.stopPropagation();
event.preventDefault();
let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
let allowDrop = this.multiple || (files && files.length === 1);
if (allowDrop) {
this.onFileSelect(event);
}
}
}
onFocus() {
this.focus = true;
}
onBlur() {
this.focus = false;
}
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.getTranslation(TranslationKeys.FILE_SIZE_TYPES);
if (bytes === 0) {
return `0 ${sizes[0]}`;
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
return `${formattedSize} ${sizes[i]}`;
}
upload() {
if (this.hasFiles())
this.uploader();
}
onBasicUploaderClick() {
this.basicFileInput?.nativeElement.click();
}
onBasicKeydown(event) {
switch (event.code) {
case 'Space':
case 'Enter':
this.onBasicUploaderClick();
event.preventDefault();
break;
}
}
imageError(event) {
this.onImageError.emit(event);
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
get chooseButtonLabel() {
return this.chooseLabel || this.config.getTranslation(TranslationKeys.CHOOSE);
}
get uploadButtonLabel() {
return this.uploadLabel || this.config.getTranslation(TranslationKeys.UPLOAD);
}
get cancelButtonLabel() {
return this.cancelLabel || this.config.getTranslation(TranslationKeys.CANCEL);
}
get browseFilesLabel() {
return this.config.getTranslation(TranslationKeys.ARIA)[TranslationKeys.BROWSE_FILES];
}
get pendingLabel() {
return this.config.getTranslation(TranslationKeys.PENDING);
}
onDestroy() {
if (this.content && this.content.nativeElement) {
if (this.dragOverListener) {
this.dragOverListener();
this.dragOverListener = null;
}
}
if (this.translationSubscription) {
this.translationSubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, undefined)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", chooseButtonProps: "chooseButtonProps", uploadButtonProps: "uploadButtonProps", cancelButtonProps: "cancelButtonProps", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, providers: [FileUploadStyle, { provide: FILEUPLOAD_INSTANCE, useExisting: FileUpload }, { provide: PARENT_INSTANCE, useExisting: FileUpload }], queries: [{ propertyName: "fileTemplate", first: true, predicate: ["file"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
<div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [pBind]="ptm('root')">
<input [attr.aria-label]="browseFilesLabel" #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''" [pBind]="ptm('input')" />
<div [class]="cx('header')" [pBind]="ptm('header')">
<ng-container *ngIf="!headerTemplate && !_headerTemplate">
<p-button
[styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
[disabled]="disabled || isChooseDisabled()"
(focus)="onFocus()"
[label]="chooseButtonLabel"
(blur)="onBlur()"
(onClick)="choose()"
(keydown.enter)="choose()"
[buttonProps]="chooseButtonProps"
[pt]="ptm('pcChooseButton')"
[unstyled]="unstyled()"
>
<input
[attr.aria-label]="browseFilesLabel"
#advancedfileinput
type="file"
(change)="onFileSelect($event)"
[multiple]="multiple"
[accept]="accept"
[disabled]="disabled || isChooseDisabled()"
[attr.title]="''"
[pBind]="ptm('input')"
/>
<ng-template #icon>
<span *ngIf="chooseIcon" [class]="chooseIcon" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!chooseIcon">
<svg data-p-icon="plus" *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon" />
<span *ngIf="chooseIconTemplate || _chooseIconTemplate" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon">
<ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
<p-button
*ngIf="!auto && showUploadButton"
[label]="uploadButtonLabel"
(onClick)="upload()"
[disabled]="!hasFiles() || isFileLimitExceeded()"
[styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
[buttonProps]="uploadButtonProps"
[pt]="ptm('pcUploadButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
<span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
<ng-container *ngIf="!uploadIcon">
<svg data-p-icon="upload" *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [pBind]="ptm('pcUploadButton')?.icon" />
<span *ngIf="uploadIconTemplate || _uploadIconTemplate" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon">
<ng-template *ngTemplateOutlet="uploadIconTemplate || _uploadIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
<p-button
*ngIf="!auto && showCancelButton"
[label]="cancelButtonLabel"
(onClick)="clear()"
[disabled]="!hasFiles() || uploading"
[styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)"
[buttonProps]="cancelButtonProps"
[pt]="ptm('pcCancelButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
<span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
<ng-container *ngIf="!cancelIcon">
<svg data-p-icon="times" *ngIf="!cancelIconTemplate && !_cancelIconTemplate" [attr.aria-hidden]="true" />
<span *ngIf="cancelIconTemplate || _cancelIconTemplate" [attr.aria-hidden]="true">
<ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
</ng-container>
<ng-container
*ngTemplateOutlet="
headerTemplate || _headerTemplate;
context: {
$implicit: files,
uploadedFiles: uploadedFiles,
chooseCallback: choose.bind(this),
clearCallback: clear.bind(this),
uploadCallback: upload.bind(this)
}
"
></ng-container>
<ng-container *ngTemplateOutlet="toolbarTemplate || _toolbarTemplate"></ng-container>
</div>
<div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [pBind]="ptm('content')">
@if (contentTemplate || _contentTemplate) {
<ng-container
*ngTemplateOutlet="
contentTemplate || _contentTemplate;
context: {
$implicit: files,
uploadedFiles: uploadedFiles,
chooseCallback: choose.bind(this),
clearCallback: clear.bind(this),
removeUploadedFileCallback: removeUploadedFile.bind(this),
removeFileCallback: remove.bind(this),
progress: progress,
messages: msgs
}
"
></ng-container>
} @else {
<p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()" [pt]="ptm('pcProgressBar')"></p-progressbar>
@for (message of msgs; track message) {
<p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
}
@if (hasFiles()) {
<div [class]="cx('fileList')" [pBind]="ptm('fileList')">
<ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
@if (!fileTemplate && !_fileTemplate) {
<div
pFileContent
[unstyled]="unstyled()"
[files]="files"
(onRemove)="onRemoveClick($event)"
[badgeValue]="pendingLabel"
[previewWidth]="previewWidth"
[fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
></div>
}
</div>
}
@if (hasUploadedFiles()) {
<div [class]="cx('fileList')" [pBind]="ptm('fileList')">
<ng-template ngFor [ngForOf]="uploadedFiles" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
@if (!fileTemplate && !_fileTemplate) {
<div
pFileContent
[unstyled]="unstyled()"
[files]="uploadedFiles"
(onRemove)="onRemoveUploadedFileClick($event)"
[badgeValue]="completedLabel()"
badgeSeverity="success"
[previewWidth]="previewWidth"
[fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
></div>
}
</div>
}
}
@if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
<ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate" [pBind]="ptm('empty')"></ng-container>
}
</div>
</div>
<div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [pBind]="ptm('root')">
@for (message of msgs; track message) {
<p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
}
<div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
<p-button
[styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
[disabled]="disabled"
[label]="chooseButtonLabel"
[style]="style"
(onClick)="onBasicUploaderClick()"
(keydown)="onBasicKeydown($event)"
[buttonProps]="chooseButtonProps"
[pt]="ptm('pcChooseButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
@if (hasFiles() && !auto) {
<span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!uploadIcon">
<svg data-p-icon="upload" *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [class]="'p-button-icon p-button-icon-left'" [pBind]="ptm('pcChooseButton')?.icon" />
<span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left" [pBind]="ptm('pcChooseButton')?.icon">
<ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
</span>
</ng-container>
} @else {
<span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!chooseIcon">
<svg data-p-icon="plus" *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [pBind]="ptm('pcChooseButton')?.icon" />
<ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
</ng-container>
}
</ng-template>
<input [attr.aria-label]="browseFilesLabel" #basicfileinput type="file" [accept]="accept" [multiple]="multiple" [disabled]="disabled" (change)="onFileSelect($event)" (focus)="onFocus()" (blur)="onBlur()" [pBind]="ptm('input')" />
</p-button>
@if (!auto) {
@if (!fileLabelTemplate && !_fileLabelTemplate) {
<span>
{{ basicFileChosenLabel() }}
</span>
} @else {
<ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
}
}
</div>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: PlusIcon, selector: "[data-p-icon=\"plus\"]" }, { kind: "component", type: UploadIcon, selector: "[data-p-icon=\"upload\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: FileContent, selector: "[pFileContent]", inputs: ["files", "badgeSeverity", "badgeValue", "previewWidth", "fileRemoveIconTemplate"], outputs: ["onRemove"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUpload, decorators: [{
type: Component,
args: [{
selector: 'p-fileupload, p-fileUpload',
standalone: true,
imports: [CommonModule, Button, ProgressBar, Message, PlusIcon, UploadIcon, TimesIcon, SharedModule, FileContent, Bind],
template: `
<div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [pBind]="ptm('root')">
<input [attr.aria-label]="browseFilesLabel" #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''" [pBind]="ptm('input')" />
<div [class]="cx('header')" [pBind]="ptm('header')">
<ng-container *ngIf="!headerTemplate && !_headerTemplate">
<p-button
[styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
[disabled]="disabled || isChooseDisabled()"
(focus)="onFocus()"
[label]="chooseButtonLabel"
(blur)="onBlur()"
(onClick)="choose()"
(keydown.enter)="choose()"
[buttonProps]="chooseButtonProps"
[pt]="ptm('pcChooseButton')"
[unstyled]="unstyled()"
>
<input
[attr.aria-label]="browseFilesLabel"
#advancedfileinput
type="file"
(change)="onFileSelect($event)"
[multiple]="multiple"
[accept]="accept"
[disabled]="disabled || isChooseDisabled()"
[attr.title]="''"
[pBind]="ptm('input')"
/>
<ng-template #icon>
<span *ngIf="chooseIcon" [class]="chooseIcon" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!chooseIcon">
<svg data-p-icon="plus" *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon" />
<span *ngIf="chooseIconTemplate || _chooseIconTemplate" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon">
<ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
<p-button
*ngIf="!auto && showUploadButton"
[label]="uploadButtonLabel"
(onClick)="upload()"
[disabled]="!hasFiles() || isFileLimitExceeded()"
[styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
[buttonProps]="uploadButtonProps"
[pt]="ptm('pcUploadButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
<span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
<ng-container *ngIf="!uploadIcon">
<svg data-p-icon="upload" *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [pBind]="ptm('pcUploadButton')?.icon" />
<span *ngIf="uploadIconTemplate || _uploadIconTemplate" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon">
<ng-template *ngTemplateOutlet="uploadIconTemplate || _uploadIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
<p-button
*ngIf="!auto && showCancelButton"
[label]="cancelButtonLabel"
(onClick)="clear()"
[disabled]="!hasFiles() || uploading"
[styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)"
[buttonProps]="cancelButtonProps"
[pt]="ptm('pcCancelButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
<span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
<ng-container *ngIf="!cancelIcon">
<svg data-p-icon="times" *ngIf="!cancelIconTemplate && !_cancelIconTemplate" [attr.aria-hidden]="true" />
<span *ngIf="cancelIconTemplate || _cancelIconTemplate" [attr.aria-hidden]="true">
<ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
</span>
</ng-container>
</ng-template>
</p-button>
</ng-container>
<ng-container
*ngTemplateOutlet="
headerTemplate || _headerTemplate;
context: {
$implicit: files,
uploadedFiles: uploadedFiles,
chooseCallback: choose.bind(this),
clearCallback: clear.bind(this),
uploadCallback: upload.bind(this)
}
"
></ng-container>
<ng-container *ngTemplateOutlet="toolbarTemplate || _toolbarTemplate"></ng-container>
</div>
<div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [pBind]="ptm('content')">
@if (contentTemplate || _contentTemplate) {
<ng-container
*ngTemplateOutlet="
contentTemplate || _contentTemplate;
context: {
$implicit: files,
uploadedFiles: uploadedFiles,
chooseCallback: choose.bind(this),
clearCallback: clear.bind(this),
removeUploadedFileCallback: removeUploadedFile.bind(this),
removeFileCallback: remove.bind(this),
progress: progress,
messages: msgs
}
"
></ng-container>
} @else {
<p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()" [pt]="ptm('pcProgressBar')"></p-progressbar>
@for (message of msgs; track message) {
<p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
}
@if (hasFiles()) {
<div [class]="cx('fileList')" [pBind]="ptm('fileList')">
<ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
@if (!fileTemplate && !_fileTemplate) {
<div
pFileContent
[unstyled]="unstyled()"
[files]="files"
(onRemove)="onRemoveClick($event)"
[badgeValue]="pendingLabel"
[previewWidth]="previewWidth"
[fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
></div>
}
</div>
}
@if (hasUploadedFiles()) {
<div [class]="cx('fileList')" [pBind]="ptm('fileList')">
<ng-template ngFor [ngForOf]="uploadedFiles" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
@if (!fileTemplate && !_fileTemplate) {
<div
pFileContent
[unstyled]="unstyled()"
[files]="uploadedFiles"
(onRemove)="onRemoveUploadedFileClick($event)"
[badgeValue]="completedLabel()"
badgeSeverity="success"
[previewWidth]="previewWidth"
[fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
></div>
}
</div>
}
}
@if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
<ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate" [pBind]="ptm('empty')"></ng-container>
}
</div>
</div>
<div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [pBind]="ptm('root')">
@for (message of msgs; track message) {
<p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
}
<div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
<p-button
[styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
[disabled]="disabled"
[label]="chooseButtonLabel"
[style]="style"
(onClick)="onBasicUploaderClick()"
(keydown)="onBasicKeydown($event)"
[buttonProps]="chooseButtonProps"
[pt]="ptm('pcChooseButton')"
[unstyled]="unstyled()"
>
<ng-template #icon>
@if (hasFiles() && !auto) {
<span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!uploadIcon">
<svg data-p-icon="upload" *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [class]="'p-button-icon p-button-icon-left'" [pBind]="ptm('pcChooseButton')?.icon" />
<span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left" [pBind]="ptm('pcChooseButton')?.icon">
<ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
</span>
</ng-container>
} @else {
<span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon" [pBind]="ptm('pcChooseButton')?.icon"></span>
<ng-container *ngIf="!chooseIcon">
<svg data-p-icon="plus" *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [pBind]="ptm('pcChooseButton')?.icon" />
<ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
</ng-container>
}
</ng-template>
<input [attr.aria-label]="browseFilesLabel" #basicfileinput type="file" [accept]="accept" [multiple]="multiple" [disabled]="disabled" (change)="onFileSelect($event)" (focus)="onFocus()" (blur)="onBlur()" [pBind]="ptm('input')" />
</p-button>
@if (!auto) {
@if (!fileLabelTemplate && !_fileLabelTemplate) {
<span>
{{ basicFileChosenLabel() }}
</span>
} @else {
<ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
}
}
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [FileUploadStyle, { provide: FILEUPLOAD_INSTANCE, useExisting: FileUpload }, { provide: PARENT_INSTANCE, useExisting: FileUpload }],
hostDirectives: [Bind]
}]
}], propDecorators: { name: [{
type: Input
}], url: [{
type: Input
}], method: [{
type: Input
}], multiple: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], accept: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], auto: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], withCredentials: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], maxFileSize: [{
type: Input,
args: [{ transform: numberAttribute }]
}], invalidFileSizeMessageSummary: [{
type: Input
}], invalidFileSizeMessageDetail: [{
type: Input
}], invalidFileTypeMessageSummary: [{
type: Input
}], invalidFileTypeMessageDetail: [{
type: Input
}], invalidFileLimitMessageDetail: [{
type: Input
}], invalidFileLimitMessageSummary: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], previewWidth: [{
type: Input,
args: [{ transform: numberAttribute }]
}], chooseLabel: [{
type: Input
}], uploadLabel: [{
type: Input
}], cancelLabel: [{
type: Input
}], chooseIcon: [{
type: Input
}], uploadIcon: [{
type: Input
}], cancelIcon: [{
type: Input
}], showUploadButton: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showCancelButton: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], mode: [{
type: Input
}], headers: [{
type: Input
}], customUpload: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], fileLimit: [{
type: Input,
args: [{ transform: (value) => numberAttribute(value, undefined) }]
}], uploadStyleClass: [{
type: Input
}], cancelStyleClass: [{
type: Input
}], removeStyleClass: [{
type: Input
}], chooseStyleClass: [{
type: Input
}], chooseButtonProps: [{
type: Input
}], uploadButtonProps: [{
type: Input
}], cancelButtonProps: [{
type: Input
}], onBeforeUpload: [{
type: Output
}], onSend: [{
type: Output
}], onUpload: [{
type: Output
}], onError: [{
type: Output
}], onClear: [{
type: Output
}], onRemove: [{
type: Output
}], onSelect: [{
type: Output
}], onProgress: [{
type: Output
}], uploadHandler: [{
type: Output
}], onImageError: [{
type: Output
}], onRemoveUploadedFile: [{
type: Output
}], fileTemplate: [{
type: ContentChild,
args: ['file', { descendants: false }]
}], headerTemplate: [{
type: ContentChild,
args: ['header', { descendants: false }]
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], toolbarTemplate: [{
type: ContentChild,
args: ['toolbar', { descendants: false }]
}], chooseIconTemplate: [{
type: ContentChild,
args: ['chooseicon', { descendants: false }]
}], fileLabelTemplate: [{
type: ContentChild,
args: ['filelabel', { descendants: false }]
}], uploadIconTemplate: [{
type: ContentChild,
args: ['uploadicon', { descendants: false }]
}], cancelIconTemplate: [{
type: ContentChild,
args: ['cancelicon', { descendants: false }]
}], emptyTemplate: [{
type: ContentChild,
args: ['empty', { descendants: false }]
}], advancedFileInput: [{
type: ViewChild,
args: ['advancedfileinput']
}], basicFileInput: [{
type: ViewChild,
args: ['basicfileinput']
}], content: [{
type: ViewChild,
args: ['content']
}], files: [{
type: Input
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class FileUploadModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule], exports: [FileUpload, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileUploadModule, decorators: [{
type: NgModule,
args: [{
imports: [FileUpload, SharedModule],
exports: [FileUpload, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FileContent, FileUpload, FileUploadClasses, FileUploadModule, FileUploadStyle };
//# sourceMappingURL=primeng-fileupload.mjs.map