| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i7 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import * as i4 from 'primeng/button';
|
|---|
| 6 | import { ButtonModule } from 'primeng/button';
|
|---|
| 7 | import * as i6 from 'primeng/messages';
|
|---|
| 8 | import { MessagesModule } from 'primeng/messages';
|
|---|
| 9 | import * as i5 from 'primeng/progressbar';
|
|---|
| 10 | import { ProgressBarModule } from 'primeng/progressbar';
|
|---|
| 11 | import { DomHandler } from 'primeng/dom';
|
|---|
| 12 | import * as i3 from 'primeng/api';
|
|---|
| 13 | import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
|
|---|
| 14 | import * as i8 from 'primeng/ripple';
|
|---|
| 15 | import { RippleModule } from 'primeng/ripple';
|
|---|
| 16 | import * as i2 from '@angular/common/http';
|
|---|
| 17 | import { HttpEventType } from '@angular/common/http';
|
|---|
| 18 | import * as i1 from '@angular/platform-browser';
|
|---|
| 19 |
|
|---|
| 20 | class FileUpload {
|
|---|
| 21 | constructor(el, sanitizer, zone, http, cd, config) {
|
|---|
| 22 | this.el = el;
|
|---|
| 23 | this.sanitizer = sanitizer;
|
|---|
| 24 | this.zone = zone;
|
|---|
| 25 | this.http = http;
|
|---|
| 26 | this.cd = cd;
|
|---|
| 27 | this.config = config;
|
|---|
| 28 | this.method = 'post';
|
|---|
| 29 | this.invalidFileSizeMessageSummary = '{0}: Invalid file size, ';
|
|---|
| 30 | this.invalidFileSizeMessageDetail = 'maximum upload size is {0}.';
|
|---|
| 31 | this.invalidFileTypeMessageSummary = '{0}: Invalid file type, ';
|
|---|
| 32 | this.invalidFileTypeMessageDetail = 'allowed file types: {0}.';
|
|---|
| 33 | this.invalidFileLimitMessageDetail = 'limit is {0} at most.';
|
|---|
| 34 | this.invalidFileLimitMessageSummary = 'Maximum number of files exceeded, ';
|
|---|
| 35 | this.previewWidth = 50;
|
|---|
| 36 | this.chooseIcon = 'pi pi-plus';
|
|---|
| 37 | this.uploadIcon = 'pi pi-upload';
|
|---|
| 38 | this.cancelIcon = 'pi pi-times';
|
|---|
| 39 | this.showUploadButton = true;
|
|---|
| 40 | this.showCancelButton = true;
|
|---|
| 41 | this.mode = 'advanced';
|
|---|
| 42 | this.onBeforeUpload = new EventEmitter();
|
|---|
| 43 | this.onSend = new EventEmitter();
|
|---|
| 44 | this.onUpload = new EventEmitter();
|
|---|
| 45 | this.onError = new EventEmitter();
|
|---|
| 46 | this.onClear = new EventEmitter();
|
|---|
| 47 | this.onRemove = new EventEmitter();
|
|---|
| 48 | this.onSelect = new EventEmitter();
|
|---|
| 49 | this.onProgress = new EventEmitter();
|
|---|
| 50 | this.uploadHandler = new EventEmitter();
|
|---|
| 51 | this._files = [];
|
|---|
| 52 | this.progress = 0;
|
|---|
| 53 | this.uploadedFileCount = 0;
|
|---|
| 54 | }
|
|---|
| 55 | set files(files) {
|
|---|
| 56 | this._files = [];
|
|---|
| 57 | for (let i = 0; i < files.length; i++) {
|
|---|
| 58 | let file = files[i];
|
|---|
| 59 | if (this.validate(file)) {
|
|---|
| 60 | if (this.isImage(file)) {
|
|---|
| 61 | file.objectURL = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(files[i])));
|
|---|
| 62 | }
|
|---|
| 63 | this._files.push(files[i]);
|
|---|
| 64 | }
|
|---|
| 65 | }
|
|---|
| 66 | }
|
|---|
| 67 | get files() {
|
|---|
| 68 | return this._files;
|
|---|
| 69 | }
|
|---|
| 70 | ngAfterContentInit() {
|
|---|
| 71 | this.templates.forEach((item) => {
|
|---|
| 72 | switch (item.getType()) {
|
|---|
| 73 | case 'file':
|
|---|
| 74 | this.fileTemplate = item.template;
|
|---|
| 75 | break;
|
|---|
| 76 | case 'content':
|
|---|
| 77 | this.contentTemplate = item.template;
|
|---|
| 78 | break;
|
|---|
| 79 | case 'toolbar':
|
|---|
| 80 | this.toolbarTemplate = item.template;
|
|---|
| 81 | break;
|
|---|
| 82 | default:
|
|---|
| 83 | this.fileTemplate = item.template;
|
|---|
| 84 | break;
|
|---|
| 85 | }
|
|---|
| 86 | });
|
|---|
| 87 | }
|
|---|
| 88 | ngOnInit() {
|
|---|
| 89 | this.translationSubscription = this.config.translationObserver.subscribe(() => {
|
|---|
| 90 | this.cd.markForCheck();
|
|---|
| 91 | });
|
|---|
| 92 | }
|
|---|
| 93 | ngAfterViewInit() {
|
|---|
| 94 | if (this.mode === 'advanced') {
|
|---|
| 95 | this.zone.runOutsideAngular(() => {
|
|---|
| 96 | if (this.content)
|
|---|
| 97 | this.content.nativeElement.addEventListener('dragover', this.onDragOver.bind(this));
|
|---|
| 98 | });
|
|---|
| 99 | }
|
|---|
| 100 | }
|
|---|
| 101 | choose() {
|
|---|
| 102 | this.advancedFileInput.nativeElement.click();
|
|---|
| 103 | }
|
|---|
| 104 | onFileSelect(event) {
|
|---|
| 105 | if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
|
|---|
| 106 | this.duplicateIEEvent = false;
|
|---|
| 107 | return;
|
|---|
| 108 | }
|
|---|
| 109 | this.msgs = [];
|
|---|
| 110 | if (!this.multiple) {
|
|---|
| 111 | this.files = [];
|
|---|
| 112 | }
|
|---|
| 113 | let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|---|
| 114 | for (let i = 0; i < files.length; i++) {
|
|---|
| 115 | let file = files[i];
|
|---|
| 116 | if (!this.isFileSelected(file)) {
|
|---|
| 117 | if (this.validate(file)) {
|
|---|
| 118 | if (this.isImage(file)) {
|
|---|
| 119 | file.objectURL = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(files[i])));
|
|---|
| 120 | }
|
|---|
| 121 | this.files.push(files[i]);
|
|---|
| 122 | }
|
|---|
| 123 | }
|
|---|
| 124 | }
|
|---|
| 125 | this.onSelect.emit({ originalEvent: event, files: files, currentFiles: this.files });
|
|---|
| 126 | if (this.fileLimit && this.mode == "advanced") {
|
|---|
| 127 | this.checkFileLimit();
|
|---|
| 128 | }
|
|---|
| 129 | if (this.hasFiles() && this.auto && (!(this.mode === "advanced") || !this.isFileLimitExceeded())) {
|
|---|
| 130 | this.upload();
|
|---|
| 131 | }
|
|---|
| 132 | if (event.type !== 'drop' && this.isIE11()) {
|
|---|
| 133 | this.clearIEInput();
|
|---|
| 134 | }
|
|---|
| 135 | else {
|
|---|
| 136 | this.clearInputElement();
|
|---|
| 137 | }
|
|---|
| 138 | }
|
|---|
| 139 | isFileSelected(file) {
|
|---|
| 140 | for (let sFile of this.files) {
|
|---|
| 141 | if ((sFile.name + sFile.type + sFile.size) === (file.name + file.type + file.size)) {
|
|---|
| 142 | return true;
|
|---|
| 143 | }
|
|---|
| 144 | }
|
|---|
| 145 | return false;
|
|---|
| 146 | }
|
|---|
| 147 | isIE11() {
|
|---|
| 148 | return !!window['MSInputMethodContext'] && !!document['documentMode'];
|
|---|
| 149 | }
|
|---|
| 150 | validate(file) {
|
|---|
| 151 | if (this.accept && !this.isFileTypeValid(file)) {
|
|---|
| 152 | this.msgs.push({
|
|---|
| 153 | severity: 'error',
|
|---|
| 154 | summary: this.invalidFileTypeMessageSummary.replace('{0}', file.name),
|
|---|
| 155 | detail: this.invalidFileTypeMessageDetail.replace('{0}', this.accept)
|
|---|
| 156 | });
|
|---|
| 157 | return false;
|
|---|
| 158 | }
|
|---|
| 159 | if (this.maxFileSize && file.size > this.maxFileSize) {
|
|---|
| 160 | this.msgs.push({
|
|---|
| 161 | severity: 'error',
|
|---|
| 162 | summary: this.invalidFileSizeMessageSummary.replace('{0}', file.name),
|
|---|
| 163 | detail: this.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.maxFileSize))
|
|---|
| 164 | });
|
|---|
| 165 | return false;
|
|---|
| 166 | }
|
|---|
| 167 | return true;
|
|---|
| 168 | }
|
|---|
| 169 | isFileTypeValid(file) {
|
|---|
| 170 | let acceptableTypes = this.accept.split(',').map(type => type.trim());
|
|---|
| 171 | for (let type of acceptableTypes) {
|
|---|
| 172 | let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type)
|
|---|
| 173 | : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
|
|---|
| 174 | if (acceptable) {
|
|---|
| 175 | return true;
|
|---|
| 176 | }
|
|---|
| 177 | }
|
|---|
| 178 | return false;
|
|---|
| 179 | }
|
|---|
| 180 | getTypeClass(fileType) {
|
|---|
| 181 | return fileType.substring(0, fileType.indexOf('/'));
|
|---|
| 182 | }
|
|---|
| 183 | isWildcard(fileType) {
|
|---|
| 184 | return fileType.indexOf('*') !== -1;
|
|---|
| 185 | }
|
|---|
| 186 | getFileExtension(file) {
|
|---|
| 187 | return '.' + file.name.split('.').pop();
|
|---|
| 188 | }
|
|---|
| 189 | isImage(file) {
|
|---|
| 190 | return /^image\//.test(file.type);
|
|---|
| 191 | }
|
|---|
| 192 | onImageLoad(img) {
|
|---|
| 193 | window.URL.revokeObjectURL(img.src);
|
|---|
| 194 | }
|
|---|
| 195 | upload() {
|
|---|
| 196 | if (this.customUpload) {
|
|---|
| 197 | if (this.fileLimit) {
|
|---|
| 198 | this.uploadedFileCount += this.files.length;
|
|---|
| 199 | }
|
|---|
| 200 | this.uploadHandler.emit({
|
|---|
| 201 | files: this.files
|
|---|
| 202 | });
|
|---|
| 203 | this.cd.markForCheck();
|
|---|
| 204 | }
|
|---|
| 205 | else {
|
|---|
| 206 | this.uploading = true;
|
|---|
| 207 | this.msgs = [];
|
|---|
| 208 | let formData = new FormData();
|
|---|
| 209 | this.onBeforeUpload.emit({
|
|---|
| 210 | 'formData': formData
|
|---|
| 211 | });
|
|---|
| 212 | for (let i = 0; i < this.files.length; i++) {
|
|---|
| 213 | formData.append(this.name, this.files[i], this.files[i].name);
|
|---|
| 214 | }
|
|---|
| 215 | this.http[this.method](this.url, formData, {
|
|---|
| 216 | headers: this.headers, reportProgress: true, observe: 'events', withCredentials: this.withCredentials
|
|---|
| 217 | }).subscribe((event) => {
|
|---|
| 218 | switch (event.type) {
|
|---|
| 219 | case HttpEventType.Sent:
|
|---|
| 220 | this.onSend.emit({
|
|---|
| 221 | originalEvent: event,
|
|---|
| 222 | 'formData': formData
|
|---|
| 223 | });
|
|---|
| 224 | break;
|
|---|
| 225 | case HttpEventType.Response:
|
|---|
| 226 | this.uploading = false;
|
|---|
| 227 | this.progress = 0;
|
|---|
| 228 | if (event['status'] >= 200 && event['status'] < 300) {
|
|---|
| 229 | if (this.fileLimit) {
|
|---|
| 230 | this.uploadedFileCount += this.files.length;
|
|---|
| 231 | }
|
|---|
| 232 | this.onUpload.emit({ originalEvent: event, files: this.files });
|
|---|
| 233 | }
|
|---|
| 234 | else {
|
|---|
| 235 | this.onError.emit({ files: this.files });
|
|---|
| 236 | }
|
|---|
| 237 | this.clear();
|
|---|
| 238 | break;
|
|---|
| 239 | case HttpEventType.UploadProgress: {
|
|---|
| 240 | if (event['loaded']) {
|
|---|
| 241 | this.progress = Math.round((event['loaded'] * 100) / event['total']);
|
|---|
| 242 | }
|
|---|
| 243 | this.onProgress.emit({ originalEvent: event, progress: this.progress });
|
|---|
| 244 | break;
|
|---|
| 245 | }
|
|---|
| 246 | }
|
|---|
| 247 | this.cd.markForCheck();
|
|---|
| 248 | }, error => {
|
|---|
| 249 | this.uploading = false;
|
|---|
| 250 | this.onError.emit({ files: this.files, error: error });
|
|---|
| 251 | });
|
|---|
| 252 | }
|
|---|
| 253 | }
|
|---|
| 254 | clear() {
|
|---|
| 255 | this.files = [];
|
|---|
| 256 | this.onClear.emit();
|
|---|
| 257 | this.clearInputElement();
|
|---|
| 258 | this.cd.markForCheck();
|
|---|
| 259 | }
|
|---|
| 260 | remove(event, index) {
|
|---|
| 261 | this.clearInputElement();
|
|---|
| 262 | this.onRemove.emit({ originalEvent: event, file: this.files[index] });
|
|---|
| 263 | this.files.splice(index, 1);
|
|---|
| 264 | }
|
|---|
| 265 | isFileLimitExceeded() {
|
|---|
| 266 | if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focus) {
|
|---|
| 267 | this.focus = false;
|
|---|
| 268 | }
|
|---|
| 269 | return this.fileLimit && this.fileLimit < this.files.length + this.uploadedFileCount;
|
|---|
| 270 | }
|
|---|
| 271 | isChooseDisabled() {
|
|---|
| 272 | return this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount;
|
|---|
| 273 | }
|
|---|
| 274 | checkFileLimit() {
|
|---|
| 275 | if (this.isFileLimitExceeded()) {
|
|---|
| 276 | this.msgs.push({
|
|---|
| 277 | severity: 'error',
|
|---|
| 278 | summary: this.invalidFileLimitMessageSummary.replace('{0}', this.fileLimit.toString()),
|
|---|
| 279 | detail: this.invalidFileLimitMessageDetail.replace('{0}', this.fileLimit.toString())
|
|---|
| 280 | });
|
|---|
| 281 | }
|
|---|
| 282 | }
|
|---|
| 283 | clearInputElement() {
|
|---|
| 284 | if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
|
|---|
| 285 | this.advancedFileInput.nativeElement.value = '';
|
|---|
| 286 | }
|
|---|
| 287 | if (this.basicFileInput && this.basicFileInput.nativeElement) {
|
|---|
| 288 | this.basicFileInput.nativeElement.value = '';
|
|---|
| 289 | }
|
|---|
| 290 | }
|
|---|
| 291 | clearIEInput() {
|
|---|
| 292 | if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
|
|---|
| 293 | this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
|
|---|
| 294 | this.advancedFileInput.nativeElement.value = '';
|
|---|
| 295 | }
|
|---|
| 296 | }
|
|---|
| 297 | hasFiles() {
|
|---|
| 298 | return this.files && this.files.length > 0;
|
|---|
| 299 | }
|
|---|
| 300 | onDragEnter(e) {
|
|---|
| 301 | if (!this.disabled) {
|
|---|
| 302 | e.stopPropagation();
|
|---|
| 303 | e.preventDefault();
|
|---|
| 304 | }
|
|---|
| 305 | }
|
|---|
| 306 | onDragOver(e) {
|
|---|
| 307 | if (!this.disabled) {
|
|---|
| 308 | DomHandler.addClass(this.content.nativeElement, 'p-fileupload-highlight');
|
|---|
| 309 | this.dragHighlight = true;
|
|---|
| 310 | e.stopPropagation();
|
|---|
| 311 | e.preventDefault();
|
|---|
| 312 | }
|
|---|
| 313 | }
|
|---|
| 314 | onDragLeave(event) {
|
|---|
| 315 | if (!this.disabled) {
|
|---|
| 316 | DomHandler.removeClass(this.content.nativeElement, 'p-fileupload-highlight');
|
|---|
| 317 | }
|
|---|
| 318 | }
|
|---|
| 319 | onDrop(event) {
|
|---|
| 320 | if (!this.disabled) {
|
|---|
| 321 | DomHandler.removeClass(this.content.nativeElement, 'p-fileupload-highlight');
|
|---|
| 322 | event.stopPropagation();
|
|---|
| 323 | event.preventDefault();
|
|---|
| 324 | let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|---|
| 325 | let allowDrop = this.multiple || (files && files.length === 1);
|
|---|
| 326 | if (allowDrop) {
|
|---|
| 327 | this.onFileSelect(event);
|
|---|
| 328 | }
|
|---|
| 329 | }
|
|---|
| 330 | }
|
|---|
| 331 | onFocus() {
|
|---|
| 332 | this.focus = true;
|
|---|
| 333 | }
|
|---|
| 334 | onBlur() {
|
|---|
| 335 | this.focus = false;
|
|---|
| 336 | }
|
|---|
| 337 | formatSize(bytes) {
|
|---|
| 338 | if (bytes == 0) {
|
|---|
| 339 | return '0 B';
|
|---|
| 340 | }
|
|---|
| 341 | let k = 1000, dm = 3, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k));
|
|---|
| 342 | return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
|---|
| 343 | }
|
|---|
| 344 | onBasicUploaderClick() {
|
|---|
| 345 | if (this.hasFiles())
|
|---|
| 346 | this.upload();
|
|---|
| 347 | else
|
|---|
| 348 | this.basicFileInput.nativeElement.click();
|
|---|
| 349 | }
|
|---|
| 350 | getBlockableElement() {
|
|---|
| 351 | return this.el.nativeElement.children[0];
|
|---|
| 352 | }
|
|---|
| 353 | get chooseButtonLabel() {
|
|---|
| 354 | return this.chooseLabel || this.config.getTranslation(TranslationKeys.CHOOSE);
|
|---|
| 355 | }
|
|---|
| 356 | get uploadButtonLabel() {
|
|---|
| 357 | return this.uploadLabel || this.config.getTranslation(TranslationKeys.UPLOAD);
|
|---|
| 358 | }
|
|---|
| 359 | get cancelButtonLabel() {
|
|---|
| 360 | return this.cancelLabel || this.config.getTranslation(TranslationKeys.CANCEL);
|
|---|
| 361 | }
|
|---|
| 362 | ngOnDestroy() {
|
|---|
| 363 | if (this.content && this.content.nativeElement) {
|
|---|
| 364 | this.content.nativeElement.removeEventListener('dragover', this.onDragOver);
|
|---|
| 365 | }
|
|---|
| 366 | if (this.translationSubscription) {
|
|---|
| 367 | this.translationSubscription.unsubscribe();
|
|---|
| 368 | }
|
|---|
| 369 | }
|
|---|
| 370 | }
|
|---|
| 371 | FileUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUpload, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 372 | FileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: FileUpload, selector: "p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: "multiple", accept: "accept", disabled: "disabled", auto: "auto", withCredentials: "withCredentials", maxFileSize: "maxFileSize", invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: "previewWidth", chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: "showUploadButton", showCancelButton: "showCancelButton", mode: "mode", headers: "headers", customUpload: "customUpload", fileLimit: "fileLimit", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler" }, host: { classAttribute: "p-element" }, queries: [{ 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 }], ngImport: i0, template: `
|
|---|
| 373 | <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
|
|---|
| 374 | <div class="p-fileupload-buttonbar">
|
|---|
| 375 | <span class="p-button p-component p-fileupload-choose" [ngClass]="{'p-focus': focus, 'p-disabled':disabled || isChooseDisabled()}" (focus)="onFocus()" (blur)="onBlur()" pRipple
|
|---|
| 376 | (click)="choose()" (keydown.enter)="choose()" tabindex="0">
|
|---|
| 377 | <input #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''">
|
|---|
| 378 | <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon"></span>
|
|---|
| 379 | <span class="p-button-label">{{chooseButtonLabel}}</span>
|
|---|
| 380 | </span>
|
|---|
| 381 |
|
|---|
| 382 | <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()"></p-button>
|
|---|
| 383 | <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading"></p-button>
|
|---|
| 384 |
|
|---|
| 385 | <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
|
|---|
| 386 | </div>
|
|---|
| 387 | <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
|
|---|
| 388 | <p-progressBar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressBar>
|
|---|
| 389 |
|
|---|
| 390 | <p-messages [value]="msgs" [enableService]="false"></p-messages>
|
|---|
| 391 |
|
|---|
| 392 | <div class="p-fileupload-files" *ngIf="hasFiles()">
|
|---|
| 393 | <div *ngIf="!fileTemplate">
|
|---|
| 394 | <div class="p-fileupload-row" *ngFor="let file of files; let i = index;">
|
|---|
| 395 | <div><img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" /></div>
|
|---|
| 396 | <div class="p-fileupload-filename">{{file.name}}</div>
|
|---|
| 397 | <div>{{formatSize(file.size)}}</div>
|
|---|
| 398 | <div>
|
|---|
| 399 | <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading"></button>
|
|---|
| 400 | </div>
|
|---|
| 401 | </div>
|
|---|
| 402 | </div>
|
|---|
| 403 | <div *ngIf="fileTemplate">
|
|---|
| 404 | <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
|
|---|
| 405 | </div>
|
|---|
| 406 | </div>
|
|---|
| 407 | <ng-container *ngTemplateOutlet="contentTemplate; context: {$implicit: files}"></ng-container>
|
|---|
| 408 | </div>
|
|---|
| 409 | </div>
|
|---|
| 410 | <div class="p-fileupload p-fileupload-basic p-component" *ngIf="mode === 'basic'">
|
|---|
| 411 | <p-messages [value]="msgs" [enableService]="false"></p-messages>
|
|---|
| 412 | <span [ngClass]="{'p-button p-component p-fileupload-choose': true, 'p-button-icon-only': !chooseLabel, 'p-fileupload-choose-selected': hasFiles(),'p-focus': focus, 'p-disabled':disabled}"
|
|---|
| 413 | [ngStyle]="style" [class]="styleClass" (mouseup)="onBasicUploaderClick()" (keydown)="onBasicUploaderClick()" tabindex="0" pRipple>
|
|---|
| 414 | <span class="p-button-icon p-button-icon-left pi" [ngClass]="hasFiles()&&!auto ? uploadIcon : chooseIcon"></span>
|
|---|
| 415 | <span class="p-button-label">{{auto ? chooseLabel : hasFiles() ? files[0].name : chooseLabel}}</span>
|
|---|
| 416 | <input #basicfileinput type="file" [accept]="accept" [multiple]="multiple" [disabled]="disabled"
|
|---|
| 417 | (change)="onFileSelect($event)" *ngIf="!hasFiles()" (focus)="onFocus()" (blur)="onBlur()">
|
|---|
| 418 | </span>
|
|---|
| 419 | </div>
|
|---|
| 420 | `, isInline: true, styles: [".p-fileupload-content{position:relative}.p-fileupload-row{display:flex;align-items:center}.p-fileupload-row>div{flex:1 1 auto;width:25%}.p-fileupload-row>div:last-child{text-align:right}.p-fileupload-content .p-progressbar{width:100%;position:absolute;top:0;left:0}.p-button.p-fileupload-choose{position:relative;overflow:hidden}.p-button.p-fileupload-choose input[type=file],.p-fileupload-choose.p-fileupload-choose-selected input[type=file]{display:none}.p-fluid .p-fileupload .p-button{width:auto}.p-fileupload-filename{word-break:break-all}\n"], components: [{ type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "style", "styleClass", "unit", "mode"] }, { type: i6.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.Ripple, selector: "[pRipple]" }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 421 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUpload, decorators: [{
|
|---|
| 422 | type: Component,
|
|---|
| 423 | args: [{ selector: 'p-fileUpload', template: `
|
|---|
| 424 | <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
|
|---|
| 425 | <div class="p-fileupload-buttonbar">
|
|---|
| 426 | <span class="p-button p-component p-fileupload-choose" [ngClass]="{'p-focus': focus, 'p-disabled':disabled || isChooseDisabled()}" (focus)="onFocus()" (blur)="onBlur()" pRipple
|
|---|
| 427 | (click)="choose()" (keydown.enter)="choose()" tabindex="0">
|
|---|
| 428 | <input #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''">
|
|---|
| 429 | <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon"></span>
|
|---|
| 430 | <span class="p-button-label">{{chooseButtonLabel}}</span>
|
|---|
| 431 | </span>
|
|---|
| 432 |
|
|---|
| 433 | <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()"></p-button>
|
|---|
| 434 | <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading"></p-button>
|
|---|
| 435 |
|
|---|
| 436 | <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
|
|---|
| 437 | </div>
|
|---|
| 438 | <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
|
|---|
| 439 | <p-progressBar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressBar>
|
|---|
| 440 |
|
|---|
| 441 | <p-messages [value]="msgs" [enableService]="false"></p-messages>
|
|---|
| 442 |
|
|---|
| 443 | <div class="p-fileupload-files" *ngIf="hasFiles()">
|
|---|
| 444 | <div *ngIf="!fileTemplate">
|
|---|
| 445 | <div class="p-fileupload-row" *ngFor="let file of files; let i = index;">
|
|---|
| 446 | <div><img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" /></div>
|
|---|
| 447 | <div class="p-fileupload-filename">{{file.name}}</div>
|
|---|
| 448 | <div>{{formatSize(file.size)}}</div>
|
|---|
| 449 | <div>
|
|---|
| 450 | <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading"></button>
|
|---|
| 451 | </div>
|
|---|
| 452 | </div>
|
|---|
| 453 | </div>
|
|---|
| 454 | <div *ngIf="fileTemplate">
|
|---|
| 455 | <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
|
|---|
| 456 | </div>
|
|---|
| 457 | </div>
|
|---|
| 458 | <ng-container *ngTemplateOutlet="contentTemplate; context: {$implicit: files}"></ng-container>
|
|---|
| 459 | </div>
|
|---|
| 460 | </div>
|
|---|
| 461 | <div class="p-fileupload p-fileupload-basic p-component" *ngIf="mode === 'basic'">
|
|---|
| 462 | <p-messages [value]="msgs" [enableService]="false"></p-messages>
|
|---|
| 463 | <span [ngClass]="{'p-button p-component p-fileupload-choose': true, 'p-button-icon-only': !chooseLabel, 'p-fileupload-choose-selected': hasFiles(),'p-focus': focus, 'p-disabled':disabled}"
|
|---|
| 464 | [ngStyle]="style" [class]="styleClass" (mouseup)="onBasicUploaderClick()" (keydown)="onBasicUploaderClick()" tabindex="0" pRipple>
|
|---|
| 465 | <span class="p-button-icon p-button-icon-left pi" [ngClass]="hasFiles()&&!auto ? uploadIcon : chooseIcon"></span>
|
|---|
| 466 | <span class="p-button-label">{{auto ? chooseLabel : hasFiles() ? files[0].name : chooseLabel}}</span>
|
|---|
| 467 | <input #basicfileinput type="file" [accept]="accept" [multiple]="multiple" [disabled]="disabled"
|
|---|
| 468 | (change)="onFileSelect($event)" *ngIf="!hasFiles()" (focus)="onFocus()" (blur)="onBlur()">
|
|---|
| 469 | </span>
|
|---|
| 470 | </div>
|
|---|
| 471 | `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|---|
| 472 | 'class': 'p-element'
|
|---|
| 473 | }, styles: [".p-fileupload-content{position:relative}.p-fileupload-row{display:flex;align-items:center}.p-fileupload-row>div{flex:1 1 auto;width:25%}.p-fileupload-row>div:last-child{text-align:right}.p-fileupload-content .p-progressbar{width:100%;position:absolute;top:0;left:0}.p-button.p-fileupload-choose{position:relative;overflow:hidden}.p-button.p-fileupload-choose input[type=file],.p-fileupload-choose.p-fileupload-choose-selected input[type=file]{display:none}.p-fluid .p-fileupload .p-button{width:auto}.p-fileupload-filename{word-break:break-all}\n"] }]
|
|---|
| 474 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: i0.NgZone }, { type: i2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i3.PrimeNGConfig }]; }, propDecorators: { name: [{
|
|---|
| 475 | type: Input
|
|---|
| 476 | }], url: [{
|
|---|
| 477 | type: Input
|
|---|
| 478 | }], method: [{
|
|---|
| 479 | type: Input
|
|---|
| 480 | }], multiple: [{
|
|---|
| 481 | type: Input
|
|---|
| 482 | }], accept: [{
|
|---|
| 483 | type: Input
|
|---|
| 484 | }], disabled: [{
|
|---|
| 485 | type: Input
|
|---|
| 486 | }], auto: [{
|
|---|
| 487 | type: Input
|
|---|
| 488 | }], withCredentials: [{
|
|---|
| 489 | type: Input
|
|---|
| 490 | }], maxFileSize: [{
|
|---|
| 491 | type: Input
|
|---|
| 492 | }], invalidFileSizeMessageSummary: [{
|
|---|
| 493 | type: Input
|
|---|
| 494 | }], invalidFileSizeMessageDetail: [{
|
|---|
| 495 | type: Input
|
|---|
| 496 | }], invalidFileTypeMessageSummary: [{
|
|---|
| 497 | type: Input
|
|---|
| 498 | }], invalidFileTypeMessageDetail: [{
|
|---|
| 499 | type: Input
|
|---|
| 500 | }], invalidFileLimitMessageDetail: [{
|
|---|
| 501 | type: Input
|
|---|
| 502 | }], invalidFileLimitMessageSummary: [{
|
|---|
| 503 | type: Input
|
|---|
| 504 | }], style: [{
|
|---|
| 505 | type: Input
|
|---|
| 506 | }], styleClass: [{
|
|---|
| 507 | type: Input
|
|---|
| 508 | }], previewWidth: [{
|
|---|
| 509 | type: Input
|
|---|
| 510 | }], chooseLabel: [{
|
|---|
| 511 | type: Input
|
|---|
| 512 | }], uploadLabel: [{
|
|---|
| 513 | type: Input
|
|---|
| 514 | }], cancelLabel: [{
|
|---|
| 515 | type: Input
|
|---|
| 516 | }], chooseIcon: [{
|
|---|
| 517 | type: Input
|
|---|
| 518 | }], uploadIcon: [{
|
|---|
| 519 | type: Input
|
|---|
| 520 | }], cancelIcon: [{
|
|---|
| 521 | type: Input
|
|---|
| 522 | }], showUploadButton: [{
|
|---|
| 523 | type: Input
|
|---|
| 524 | }], showCancelButton: [{
|
|---|
| 525 | type: Input
|
|---|
| 526 | }], mode: [{
|
|---|
| 527 | type: Input
|
|---|
| 528 | }], headers: [{
|
|---|
| 529 | type: Input
|
|---|
| 530 | }], customUpload: [{
|
|---|
| 531 | type: Input
|
|---|
| 532 | }], fileLimit: [{
|
|---|
| 533 | type: Input
|
|---|
| 534 | }], onBeforeUpload: [{
|
|---|
| 535 | type: Output
|
|---|
| 536 | }], onSend: [{
|
|---|
| 537 | type: Output
|
|---|
| 538 | }], onUpload: [{
|
|---|
| 539 | type: Output
|
|---|
| 540 | }], onError: [{
|
|---|
| 541 | type: Output
|
|---|
| 542 | }], onClear: [{
|
|---|
| 543 | type: Output
|
|---|
| 544 | }], onRemove: [{
|
|---|
| 545 | type: Output
|
|---|
| 546 | }], onSelect: [{
|
|---|
| 547 | type: Output
|
|---|
| 548 | }], onProgress: [{
|
|---|
| 549 | type: Output
|
|---|
| 550 | }], uploadHandler: [{
|
|---|
| 551 | type: Output
|
|---|
| 552 | }], templates: [{
|
|---|
| 553 | type: ContentChildren,
|
|---|
| 554 | args: [PrimeTemplate]
|
|---|
| 555 | }], advancedFileInput: [{
|
|---|
| 556 | type: ViewChild,
|
|---|
| 557 | args: ['advancedfileinput']
|
|---|
| 558 | }], basicFileInput: [{
|
|---|
| 559 | type: ViewChild,
|
|---|
| 560 | args: ['basicfileinput']
|
|---|
| 561 | }], content: [{
|
|---|
| 562 | type: ViewChild,
|
|---|
| 563 | args: ['content']
|
|---|
| 564 | }], files: [{
|
|---|
| 565 | type: Input
|
|---|
| 566 | }] } });
|
|---|
| 567 | class FileUploadModule {
|
|---|
| 568 | }
|
|---|
| 569 | FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 570 | FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUploadModule, declarations: [FileUpload], imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule], exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
|
|---|
| 571 | FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUploadModule, imports: [[CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule], SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
|
|---|
| 572 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: FileUploadModule, decorators: [{
|
|---|
| 573 | type: NgModule,
|
|---|
| 574 | args: [{
|
|---|
| 575 | imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule],
|
|---|
| 576 | exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule],
|
|---|
| 577 | declarations: [FileUpload]
|
|---|
| 578 | }]
|
|---|
| 579 | }] });
|
|---|
| 580 |
|
|---|
| 581 | /**
|
|---|
| 582 | * Generated bundle index. Do not edit.
|
|---|
| 583 | */
|
|---|
| 584 |
|
|---|
| 585 | export { FileUpload, FileUploadModule };
|
|---|
