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,153 lines (1,138 loc) • 85.4 kB
JavaScript
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import { HttpClient, HttpEventType } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { addClass, removeClass } from '@primeuix/utils';
import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Button } from 'primeng/button';
import { PlusIcon, UploadIcon, TimesIcon } from 'primeng/icons';
import { Message } from 'primeng/message';
import { ProgressBar } from 'primeng/progressbar';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-fileupload input[type="file"] {
display: none;
}
.p-fileupload-advanced {
border: 1px solid ${dt('fileupload.border.color')};
border-radius: ${dt('fileupload.border.radius')};
background: ${dt('fileupload.background')};
color: ${dt('fileupload.color')};
}
.p-fileupload-header {
display: flex;
align-items: center;
padding: ${dt('fileupload.header.padding')};
background: ${dt('fileupload.header.background')};
color: ${dt('fileupload.header.color')};
border-style: solid;
border-width: ${dt('fileupload.header.border.width')};
border-color: ${dt('fileupload.header.border.color')};
border-radius: ${dt('fileupload.header.border.radius')};
gap: ${dt('fileupload.header.gap')};
}
.p-fileupload-content {
border: 1px solid transparent;
display: flex;
flex-direction: column;
gap: ${dt('fileupload.content.gap')};
transition: border-color ${dt('fileupload.transition.duration')};
padding: ${dt('fileupload.content.padding')};
}
.p-fileupload-content .p-progressbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: ${dt('fileupload.progressbar.height')};
}
.p-fileupload-file-list {
display: flex;
flex-direction: column;
gap: ${dt('fileupload.filelist.gap')};
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: ${dt('fileupload.file.padding')};
border-bottom: 1px solid ${dt('fileupload.file.border.color')};
gap: ${dt('fileupload.file.gap')};
}
.p-fileupload-file:last-child {
border-bottom: 0;
}
.p-fileupload-file-info {
display: flex;
flex-direction: column;
gap: ${dt('fileupload.file.info.gap')};
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-left: auto;
}
.p-fileupload-highlight {
border: 1px dashed ${dt('fileupload.content.highlight.border.color')};
}
.p-fileupload-advanced .p-message {
margin-top: 0;
}
.p-fileupload-basic {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: ${dt('fileupload.basic.gap')};
}
`;
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'
};
class FileUploadStyle extends BaseStyle {
name = 'fileupload';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵFileUploadStyle_BaseFactory; return function FileUploadStyle_Factory(__ngFactoryType__) { return (ɵFileUploadStyle_BaseFactory || (ɵFileUploadStyle_BaseFactory = i0.ɵɵgetInheritedFactory(FileUploadStyle)))(__ngFactoryType__ || FileUploadStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FileUploadStyle, factory: FileUploadStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileUploadStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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";
})(FileUploadClasses || (FileUploadClasses = {}));
const _c0 = ["file"];
const _c1 = ["header"];
const _c2 = ["content"];
const _c3 = ["toolbar"];
const _c4 = ["chooseicon"];
const _c5 = ["filelabel"];
const _c6 = ["uploadicon"];
const _c7 = ["cancelicon"];
const _c8 = ["empty"];
const _c9 = ["advancedfileinput"];
const _c10 = ["basicfileinput"];
const _c11 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, uploadedFiles: a1, chooseCallback: a2, clearCallback: a3, uploadCallback: a4 });
const _c12 = (a0, a1, a2, a3, a4, a5, a6, a7) => ({ $implicit: a0, uploadedFiles: a1, chooseCallback: a2, clearCallback: a3, removeUploadedFileCallback: a4, removeFileCallback: a5, progress: a6, messages: a7 });
const _c13 = a0 => ({ $implicit: a0 });
function FileUpload_div_0_ng_container_4_span_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵclassMap(ctx_r1.chooseIcon);
i0.ɵɵattribute("aria-label", true)("data-pc-section", "chooseicon");
} }
function FileUpload_div_0_ng_container_4_ng_container_5_PlusIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "PlusIcon");
} if (rf & 2) {
i0.ɵɵattribute("aria-label", true)("data-pc-section", "chooseicon");
} }
function FileUpload_div_0_ng_container_4_ng_container_5_span_2_1_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_0_ng_container_4_ng_container_5_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_ng_container_4_ng_container_5_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_0_ng_container_4_ng_container_5_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_ng_container_5_span_2_1_Template, 1, 0, null, 11);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵattribute("aria-label", true)("data-pc-section", "chooseicon");
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
} }
function FileUpload_div_0_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_ng_container_5_PlusIcon_1_Template, 1, 2, "PlusIcon", 9)(2, FileUpload_div_0_ng_container_4_ng_container_5_span_2_Template, 2, 3, "span", 9);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.chooseIconTemplate && !ctx_r1._chooseIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
} }
function FileUpload_div_0_ng_container_4_p_button_6_span_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 21);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngClass", ctx_r1.uploadIcon);
i0.ɵɵattribute("aria-hidden", true);
} }
function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_UploadIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "UploadIcon");
} }
function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_1_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_1_Template, 1, 0, null, 11);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵattribute("aria-hidden", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.uploadIconTemplate || ctx_r1._uploadIconTemplate);
} }
function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_UploadIcon_1_Template, 1, 0, "UploadIcon", 9)(2, FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_Template, 2, 2, "span", 9);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.uploadIconTemplate && !ctx_r1._uploadIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.uploadIconTemplate || ctx_r1._uploadIconTemplate);
} }
function FileUpload_div_0_ng_container_4_p_button_6_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 19);
i0.ɵɵlistener("onClick", function FileUpload_div_0_ng_container_4_p_button_6_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.upload()); });
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_6_span_1_Template, 1, 2, "span", 20)(2, FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_Template, 3, 2, "ng-container", 9);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.uploadButtonLabel)("disabled", !ctx_r1.hasFiles() || ctx_r1.isFileLimitExceeded())("styleClass", "p-fileupload-upload-button " + ctx_r1.uploadStyleClass)("buttonProps", ctx_r1.uploadButtonProps);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.uploadIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.uploadIcon);
} }
function FileUpload_div_0_ng_container_4_p_button_7_span_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 21);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngClass", ctx_r1.cancelIcon);
} }
function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_TimesIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "TimesIcon");
} if (rf & 2) {
i0.ɵɵattribute("aria-hidden", true);
} }
function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_1_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_1_Template, 1, 0, null, 11);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵattribute("aria-hidden", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
} }
function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_TimesIcon_1_Template, 1, 1, "TimesIcon", 9)(2, FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_Template, 2, 2, "span", 9);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.cancelIconTemplate && !ctx_r1._cancelIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
} }
function FileUpload_div_0_ng_container_4_p_button_7_Template(rf, ctx) { if (rf & 1) {
const _r5 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 19);
i0.ɵɵlistener("onClick", function FileUpload_div_0_ng_container_4_p_button_7_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clear()); });
i0.ɵɵtemplate(1, FileUpload_div_0_ng_container_4_p_button_7_span_1_Template, 1, 1, "span", 20)(2, FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_Template, 3, 2, "ng-container", 9);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.cancelButtonLabel)("disabled", !ctx_r1.hasFiles() || ctx_r1.uploading)("styleClass", "p-fileupload-cancel-button " + ctx_r1.cancelStyleClass)("buttonProps", ctx_r1.cancelButtonProps);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.cancelIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.cancelIcon);
} }
function FileUpload_div_0_ng_container_4_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementContainerStart(0);
i0.ɵɵelementStart(1, "p-button", 16);
i0.ɵɵlistener("focus", function FileUpload_div_0_ng_container_4_Template_p_button_focus_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFocus()); })("blur", function FileUpload_div_0_ng_container_4_Template_p_button_blur_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onBlur()); })("onClick", function FileUpload_div_0_ng_container_4_Template_p_button_onClick_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.choose()); })("keydown.enter", function FileUpload_div_0_ng_container_4_Template_p_button_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.choose()); });
i0.ɵɵelementStart(2, "input", 7, 0);
i0.ɵɵlistener("change", function FileUpload_div_0_ng_container_4_Template_input_change_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileSelect($event)); });
i0.ɵɵelementEnd();
i0.ɵɵtemplate(4, FileUpload_div_0_ng_container_4_span_4_Template, 1, 4, "span", 17)(5, FileUpload_div_0_ng_container_4_ng_container_5_Template, 3, 2, "ng-container", 9);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(6, FileUpload_div_0_ng_container_4_p_button_6_Template, 3, 6, "p-button", 18)(7, FileUpload_div_0_ng_container_4_p_button_7_Template, 3, 6, "p-button", 18);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("styleClass", "p-fileupload-choose-button " + ctx_r1.chooseStyleClass)("disabled", ctx_r1.disabled || ctx_r1.isChooseDisabled())("label", ctx_r1.chooseButtonLabel)("buttonProps", ctx_r1.chooseButtonProps);
i0.ɵɵattribute("data-pc-section", "choosebutton");
i0.ɵɵadvance();
i0.ɵɵproperty("multiple", ctx_r1.multiple)("accept", ctx_r1.accept)("disabled", ctx_r1.disabled || ctx_r1.isChooseDisabled());
i0.ɵɵattribute("aria-label", ctx_r1.browseFilesLabel)("title", "")("data-pc-section", "input");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.chooseIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.chooseIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.auto && ctx_r1.showUploadButton);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.auto && ctx_r1.showCancelButton);
} }
function FileUpload_div_0_ng_container_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function FileUpload_div_0_ng_container_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function FileUpload_div_0_p_progressbar_9_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "p-progressbar", 22);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("value", ctx_r1.progress)("showValue", false);
} }
function FileUpload_div_0_For_11_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "p-message", 14);
} if (rf & 2) {
const message_r6 = ctx.$implicit;
i0.ɵɵproperty("severity", message_r6.severity)("text", message_r6.text);
} }
function FileUpload_div_0_div_12_Conditional_1_div_0_img_1_Template(rf, ctx) { if (rf & 1) {
const _r8 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "img", 33);
i0.ɵɵlistener("error", function FileUpload_div_0_div_12_Conditional_1_div_0_img_1_Template_img_error_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.imageError($event)); });
i0.ɵɵelementEnd();
} if (rf & 2) {
const file_r9 = i0.ɵɵnextContext().$implicit;
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("src", file_r9.objectURL, i0.ɵɵsanitizeUrl)("width", ctx_r1.previewWidth);
} }
function FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_TimesIcon_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "TimesIcon");
} }
function FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_1_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_TimesIcon_0_Template, 1, 0, "TimesIcon", 9)(1, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_1_Template, 1, 0, null, 11);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵproperty("ngIf", !ctx_r1.cancelIconTemplate && !ctx_r1._cancelIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
} }
function FileUpload_div_0_div_12_Conditional_1_div_0_Template(rf, ctx) { if (rf & 1) {
const _r7 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 24);
i0.ɵɵtemplate(1, FileUpload_div_0_div_12_Conditional_1_div_0_img_1_Template, 1, 2, "img", 27);
i0.ɵɵelementStart(2, "div", 28)(3, "div", 29);
i0.ɵɵtext(4);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "span", 30);
i0.ɵɵtext(6);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(7, "div", 31)(8, "p-button", 32);
i0.ɵɵlistener("onClick", function FileUpload_div_0_div_12_Conditional_1_div_0_Template_p_button_onClick_8_listener($event) { const i_r10 = i0.ɵɵrestoreView(_r7).index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.remove($event, i_r10)); });
i0.ɵɵtemplate(9, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_Template, 2, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
const file_r9 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.isImage(file_r9));
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(file_r9.name);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r1.formatSize(file_r9.size));
i0.ɵɵadvance(2);
i0.ɵɵproperty("disabled", ctx_r1.uploading)("styleClass", "p-fileupload-file-remove-button " + ctx_r1.removeStyleClass);
} }
function FileUpload_div_0_div_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_1_div_0_Template, 11, 5, "div", 26);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngForOf", ctx_r1.files);
} }
function FileUpload_div_0_div_12_Conditional_2_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_0_div_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_2_ng_template_0_Template, 0, 0, "ng-template", 25);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngForOf", ctx_r1.files)("ngForTemplate", ctx_r1.fileTemplate || ctx_r1._fileTemplate);
} }
function FileUpload_div_0_div_12_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 23);
i0.ɵɵtemplate(1, FileUpload_div_0_div_12_Conditional_1_Template, 1, 1, "div", 24)(2, FileUpload_div_0_div_12_Conditional_2_Template, 1, 2, null, 25);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵconditional(!ctx_r1.fileTemplate && !ctx_r1._fileTemplate ? 1 : -1);
i0.ɵɵadvance();
i0.ɵɵconditional(ctx_r1.fileTemplate || ctx_r1._fileTemplate ? 2 : -1);
} }
function FileUpload_div_0_ng_container_13_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function FileUpload_div_0_Conditional_14_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function FileUpload_div_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_0_Conditional_14_ng_container_0_Template, 1, 0, "ng-container", 11);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate || ctx_r1._emptyTemplate);
} }
function FileUpload_div_0_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 6)(1, "input", 7, 0);
i0.ɵɵlistener("change", function FileUpload_div_0_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileSelect($event)); });
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "div", 8);
i0.ɵɵtemplate(4, FileUpload_div_0_ng_container_4_Template, 8, 15, "ng-container", 9)(5, FileUpload_div_0_ng_container_5_Template, 1, 0, "ng-container", 10)(6, FileUpload_div_0_ng_container_6_Template, 1, 0, "ng-container", 11);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "div", 12, 1);
i0.ɵɵlistener("dragenter", function FileUpload_div_0_Template_div_dragenter_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDragEnter($event)); })("dragleave", function FileUpload_div_0_Template_div_dragleave_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDragLeave($event)); })("drop", function FileUpload_div_0_Template_div_drop_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDrop($event)); });
i0.ɵɵtemplate(9, FileUpload_div_0_p_progressbar_9_Template, 1, 2, "p-progressbar", 13);
i0.ɵɵrepeaterCreate(10, FileUpload_div_0_For_11_Template, 1, 2, "p-message", 14, i0.ɵɵrepeaterTrackByIdentity);
i0.ɵɵtemplate(12, FileUpload_div_0_div_12_Template, 3, 2, "div", 15)(13, FileUpload_div_0_ng_container_13_Template, 1, 0, "ng-container", 10)(14, FileUpload_div_0_Conditional_14_Template, 1, 1, "ng-container");
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r1.styleClass);
i0.ɵɵproperty("ngClass", "p-fileupload p-fileupload-advanced p-component")("ngStyle", ctx_r1.style);
i0.ɵɵattribute("data-pc-name", "fileupload")("data-pc-section", "root");
i0.ɵɵadvance();
i0.ɵɵstyleProp("display", "none");
i0.ɵɵproperty("multiple", ctx_r1.multiple)("accept", ctx_r1.accept)("disabled", ctx_r1.disabled || ctx_r1.isChooseDisabled());
i0.ɵɵattribute("aria-label", ctx_r1.browseFilesLabel)("title", "")("data-pc-section", "input");
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", !ctx_r1.headerTemplate && !ctx_r1._headerTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction5(24, _c11, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.upload.bind(ctx_r1)));
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.toolbarTemplate || ctx_r1._toolbarTemplate);
i0.ɵɵadvance();
i0.ɵɵattribute("data-pc-section", "content");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.hasFiles());
i0.ɵɵadvance();
i0.ɵɵrepeater(ctx_r1.msgs);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.hasFiles());
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction8(30, _c12, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.removeUploadedFile.bind(ctx_r1), ctx_r1.remove.bind(ctx_r1), ctx_r1.progress, ctx_r1.msgs));
i0.ɵɵadvance();
i0.ɵɵconditional((ctx_r1.emptyTemplate || ctx_r1._emptyTemplate) && !ctx_r1.hasFiles() && !ctx_r1.hasUploadedFiles() ? 14 : -1);
} }
function FileUpload_div_1_For_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "p-message", 14);
} if (rf & 2) {
const message_r12 = ctx.$implicit;
i0.ɵɵproperty("severity", message_r12.severity)("text", message_r12.text);
} }
function FileUpload_div_1_ng_template_4_Conditional_0_span_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 37);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngClass", ctx_r1.uploadIcon);
} }
function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_UploadIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "UploadIcon", 40);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-button-icon p-button-icon-left");
} }
function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_1_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 41);
i0.ɵɵtemplate(1, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_1_Template, 1, 0, null, 11);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._uploadIconTemplate || ctx_r1.uploadIconTemplate);
} }
function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_UploadIcon_1_Template, 1, 1, "UploadIcon", 38)(2, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_Template, 2, 1, "span", 39);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.uploadIconTemplate && !ctx_r1._uploadIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1._uploadIconTemplate || ctx_r1.uploadIconTemplate);
} }
function FileUpload_div_1_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_0_span_0_Template, 1, 1, "span", 36)(1, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_Template, 3, 2, "ng-container", 9);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngIf", ctx_r1.uploadIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.uploadIcon);
} }
function FileUpload_div_1_ng_template_4_Conditional_1_span_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 43);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngClass", ctx_r1.chooseIcon);
} }
function FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_PlusIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "PlusIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "uploadicon");
} }
function FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_2_ng_template_0_Template(rf, ctx) { }
function FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_2_ng_template_0_Template, 0, 0, "ng-template");
} }
function FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_PlusIcon_1_Template, 1, 1, "PlusIcon", 9)(2, FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_2_Template, 1, 0, null, 11);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.chooseIconTemplate && !ctx_r1._chooseIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
} }
function FileUpload_div_1_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_1_span_0_Template, 1, 1, "span", 42)(1, FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_Template, 3, 2, "ng-container", 9);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngIf", ctx_r1.chooseIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.chooseIcon);
} }
function FileUpload_div_1_ng_template_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_0_Template, 2, 2)(1, FileUpload_div_1_ng_template_4_Conditional_1_Template, 2, 2);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵconditional(ctx_r1.hasFiles() && !ctx_r1.auto ? 0 : 1);
} }
function FileUpload_div_1_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵclassMap(ctx_r1.cx("filelabel"));
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r1.basicFileChosenLabel(), " ");
} }
function FileUpload_div_1_Conditional_8_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function FileUpload_div_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_Conditional_8_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 10);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.fileLabelTemplate || ctx_r1._fileLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, ctx_r1.files));
} }
function FileUpload_div_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, FileUpload_div_1_Conditional_8_Conditional_0_Template, 2, 3, "span", 44)(1, FileUpload_div_1_Conditional_8_Conditional_1_Template, 1, 4, "ng-container");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵconditional(!ctx_r1.fileLabelTemplate && !ctx_r1._fileLabelTemplate ? 0 : 1);
} }
function FileUpload_div_1_Template(rf, ctx) { if (rf & 1) {
const _r11 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 21);
i0.ɵɵrepeaterCreate(1, FileUpload_div_1_For_2_Template, 1, 2, "p-message", 14, i0.ɵɵrepeaterTrackByIdentity);
i0.ɵɵelementStart(3, "p-button", 34);
i0.ɵɵlistener("onClick", function FileUpload_div_1_Template_p_button_onClick_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBasicUploaderClick()); })("keydown", function FileUpload_div_1_Template_p_button_keydown_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBasicKeydown($event)); });
i0.ɵɵtemplate(4, FileUpload_div_1_ng_template_4_Template, 2, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementStart(6, "input", 35, 3);
i0.ɵɵlistener("change", function FileUpload_div_1_Template_input_change_6_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileSelect($event)); })("focus", function FileUpload_div_1_Template_input_focus_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFocus()); })("blur", function FileUpload_div_1_Template_input_blur_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBlur()); });
i0.ɵɵelementEnd()();
i0.ɵɵtemplate(8, FileUpload_div_1_Conditional_8_Template, 2, 1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r1.styleClass);
i0.ɵɵproperty("ngClass", "p-fileupload p-fileupload-basic p-component");
i0.ɵɵattribute("data-pc-name", "fileupload");
i0.ɵɵadvance();
i0.ɵɵrepeater(ctx_r1.msgs);
i0.ɵɵadvance(2);
i0.ɵɵstyleMap(ctx_r1.style);
i0.ɵɵproperty("styleClass", "p-fileupload-choose-button " + ctx_r1.chooseStyleClass)("disabled", ctx_r1.disabled)("label", ctx_r1.chooseButtonLabel)("buttonProps", ctx_r1.chooseButtonProps);
i0.ɵɵadvance(3);
i0.ɵɵproperty("accept", ctx_r1.accept)("multiple", ctx_r1.multiple)("disabled", ctx_r1.disabled);
i0.ɵɵattribute("aria-label", ctx_r1.browseFilesLabel)("data-pc-section", "input");
i0.ɵɵadvance(2);
i0.ɵɵconditional(!ctx_r1.auto ? 8 : -1);
} }
/**
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
* @group Components
*/
class FileUpload extends BaseComponent {
/**
* 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();
/**
* Template for file.
* @group Templates
*/
fileTemplate;
/**
* Template for header.
* @group Templates
*/
headerTemplate;
/**
* Template for content.
* @group Templates
*/
contentTemplate;
/**
* Template for toolbar.
* @group Templates
*/
toolbarTemplate;
/**
* Template for choose icon.
* @group Templates
*/
chooseIconTemplate;
/**
* Template for file label.
* @group Templates
*/
fileLabelTemplate;
/**
* Template for upload icon.
* @group Templates
*/
uploadIconTemplate;
/**
* Template for cancel icon.
* @group Templates
*/
cancelIconTemplate;
/**
* Template for empty state.
* @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);
ngOnInit() {
super.ngOnInit();
this.translationSubscription = this.config.translationObserver.subscribe(() => {
this.cd.markForCheck();
});
}
ngAfterViewInit() {
super.ngAfterViewInit();
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;
ngAfterContentInit() {
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') || '';
}
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;
}
this.msgs = [];
if (!this.multiple) {
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(