gnezim
474 lines
20 KiB
JavaScript
474 lines
20 KiB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, ChangeDetectorRef, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
|
||
import { CommonModule } from '@angular/common';
|
||
import { DomSanitizer } from '@angular/platform-browser';
|
||
import { ButtonModule } from 'primeng/button';
|
||
import { MessagesModule } from 'primeng/messages';
|
||
import { ProgressBarModule } from 'primeng/progressbar';
|
||
import { DomHandler } from 'primeng/dom';
|
||
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
||
import { RippleModule } from 'primeng/ripple';
|
||
import { HttpEventType, HttpClient } from '@angular/common/http';
|
||
|
||
class FileUpload {
|
||
constructor(el, sanitizer, zone, http, cd) {
|
||
this.el = el;
|
||
this.sanitizer = sanitizer;
|
||
this.zone = zone;
|
||
this.http = http;
|
||
this.cd = cd;
|
||
this.method = 'POST';
|
||
this.invalidFileSizeMessageSummary = '{0}: Invalid file size, ';
|
||
this.invalidFileSizeMessageDetail = 'maximum upload size is {0}.';
|
||
this.invalidFileTypeMessageSummary = '{0}: Invalid file type, ';
|
||
this.invalidFileTypeMessageDetail = 'allowed file types: {0}.';
|
||
this.invalidFileLimitMessageDetail = 'limit is {0} at most.';
|
||
this.invalidFileLimitMessageSummary = 'Maximum number of files exceeded, ';
|
||
this.previewWidth = 50;
|
||
this.chooseLabel = 'Choose';
|
||
this.uploadLabel = 'Upload';
|
||
this.cancelLabel = 'Cancel';
|
||
this.chooseIcon = 'pi pi-plus';
|
||
this.uploadIcon = 'pi pi-upload';
|
||
this.cancelIcon = 'pi pi-times';
|
||
this.showUploadButton = true;
|
||
this.showCancelButton = true;
|
||
this.mode = 'advanced';
|
||
this.onBeforeUpload = new EventEmitter();
|
||
this.onSend = new EventEmitter();
|
||
this.onUpload = new EventEmitter();
|
||
this.onError = new EventEmitter();
|
||
this.onClear = new EventEmitter();
|
||
this.onRemove = new EventEmitter();
|
||
this.onSelect = new EventEmitter();
|
||
this.onProgress = new EventEmitter();
|
||
this.uploadHandler = new EventEmitter();
|
||
this._files = [];
|
||
this.progress = 0;
|
||
this.uploadedFileCount = 0;
|
||
}
|
||
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;
|
||
}
|
||
ngAfterContentInit() {
|
||
this.templates.forEach((item) => {
|
||
switch (item.getType()) {
|
||
case 'file':
|
||
this.fileTemplate = item.template;
|
||
break;
|
||
case 'content':
|
||
this.contentTemplate = item.template;
|
||
break;
|
||
case 'toolbar':
|
||
this.toolbarTemplate = item.template;
|
||
break;
|
||
default:
|
||
this.fileTemplate = item.template;
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
ngAfterViewInit() {
|
||
if (this.mode === 'advanced') {
|
||
this.zone.runOutsideAngular(() => {
|
||
if (this.content)
|
||
this.content.nativeElement.addEventListener('dragover', this.onDragOver.bind(this));
|
||
});
|
||
}
|
||
}
|
||
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 });
|
||
if (this.fileLimit && this.mode == "advanced") {
|
||
this.checkFileLimit();
|
||
}
|
||
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() {
|
||
return !!window['MSInputMethodContext'] && !!document['documentMode'];
|
||
}
|
||
validate(file) {
|
||
if (this.accept && !this.isFileTypeValid(file)) {
|
||
this.msgs.push({
|
||
severity: 'error',
|
||
summary: this.invalidFileTypeMessageSummary.replace('{0}', file.name),
|
||
detail: this.invalidFileTypeMessageDetail.replace('{0}', this.accept)
|
||
});
|
||
return false;
|
||
}
|
||
if (this.maxFileSize && file.size > this.maxFileSize) {
|
||
this.msgs.push({
|
||
severity: 'error',
|
||
summary: this.invalidFileSizeMessageSummary.replace('{0}', file.name),
|
||
detail: this.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.maxFileSize))
|
||
});
|
||
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);
|
||
}
|
||
upload() {
|
||
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.post(this.url, 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.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 });
|
||
});
|
||
}
|
||
}
|
||
clear() {
|
||
this.files = [];
|
||
this.onClear.emit();
|
||
this.clearInputElement();
|
||
this.cd.markForCheck();
|
||
}
|
||
remove(event, index) {
|
||
this.clearInputElement();
|
||
this.onRemove.emit({ originalEvent: event, file: this.files[index] });
|
||
this.files.splice(index, 1);
|
||
}
|
||
isFileLimitExceeded() {
|
||
if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focus) {
|
||
this.focus = false;
|
||
}
|
||
return this.fileLimit && this.fileLimit < this.files.length + this.uploadedFileCount;
|
||
}
|
||
isChooseDisabled() {
|
||
return this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount;
|
||
}
|
||
checkFileLimit() {
|
||
if (this.isFileLimitExceeded()) {
|
||
this.msgs.push({
|
||
severity: 'error',
|
||
summary: this.invalidFileLimitMessageSummary.replace('{0}', this.fileLimit.toString()),
|
||
detail: this.invalidFileLimitMessageDetail.replace('{0}', this.fileLimit.toString())
|
||
});
|
||
}
|
||
}
|
||
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;
|
||
}
|
||
onDragEnter(e) {
|
||
if (!this.disabled) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
onDragOver(e) {
|
||
if (!this.disabled) {
|
||
DomHandler.addClass(this.content.nativeElement, 'p-fileupload-highlight');
|
||
this.dragHighlight = true;
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
onDragLeave(event) {
|
||
if (!this.disabled) {
|
||
DomHandler.removeClass(this.content.nativeElement, 'p-fileupload-highlight');
|
||
}
|
||
}
|
||
onDrop(event) {
|
||
if (!this.disabled) {
|
||
DomHandler.removeClass(this.content.nativeElement, 'p-fileupload-highlight');
|
||
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) {
|
||
if (bytes == 0) {
|
||
return '0 B';
|
||
}
|
||
let k = 1024, dm = 3, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||
}
|
||
onBasicUploaderClick() {
|
||
if (this.hasFiles())
|
||
this.upload();
|
||
else
|
||
this.basicFileInput.nativeElement.click();
|
||
}
|
||
getBlockableElement() {
|
||
return this.el.nativeElement.children[0];
|
||
}
|
||
ngOnDestroy() {
|
||
if (this.content && this.content.nativeElement) {
|
||
this.content.nativeElement.removeEventListener('dragover', this.onDragOver);
|
||
}
|
||
}
|
||
}
|
||
FileUpload.decorators = [
|
||
{ type: Component, args: [{
|
||
selector: 'p-fileUpload',
|
||
template: `
|
||
<div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
|
||
<div class="p-fileupload-buttonbar">
|
||
<span class="p-button p-component p-fileupload-choose" [ngClass]="{'p-focus': focus, 'p-disabled':disabled || isChooseDisabled()}" (focus)="onFocus()" (blur)="onBlur()" pRipple
|
||
(click)="choose()" (keydown.enter)="choose()" tabindex="0">
|
||
<input #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''">
|
||
<span [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon"></span>
|
||
<span class="p-button-label">{{chooseLabel}}</span>
|
||
</span>
|
||
|
||
<p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()"></p-button>
|
||
<p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading"></p-button>
|
||
|
||
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
|
||
</div>
|
||
<div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
|
||
<p-progressBar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressBar>
|
||
|
||
<p-messages [value]="msgs" [enableService]="false"></p-messages>
|
||
|
||
<div class="p-fileupload-files" *ngIf="hasFiles()">
|
||
<div *ngIf="!fileTemplate">
|
||
<div class="p-fileupload-row" *ngFor="let file of files; let i = index;">
|
||
<div><img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" /></div>
|
||
<div>{{file.name}}</div>
|
||
<div>{{formatSize(file.size)}}</div>
|
||
<div>
|
||
<button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div *ngIf="fileTemplate">
|
||
<ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
|
||
</div>
|
||
</div>
|
||
<ng-container *ngTemplateOutlet="contentTemplate; context: {$implicit: files}"></ng-container>
|
||
</div>
|
||
</div>
|
||
<div class="p-fileupload p-fileupload-basic p-component" *ngIf="mode === 'basic'">
|
||
<p-messages [value]="msgs" [enableService]="false"></p-messages>
|
||
<span [ngClass]="{'p-button p-component p-fileupload-choose': true, 'p-fil(eupload-choose-selected': hasFiles(),'p-focus': focus, 'p-disabled':disabled}"
|
||
[ngStyle]="style" [class]="styleClass" (mouseup)="onBasicUploaderClick()" (keydown)="onBasicUploaderClick()" tabindex="0" pRipple>
|
||
<span class="p-button-icon p-button-icon-left pi" [ngClass]="hasFiles()&&!auto ? uploadIcon : chooseIcon"></span>
|
||
<span class="p-button-label">{{auto ? chooseLabel : hasFiles() ? files[0].name : chooseLabel}}</span>
|
||
<input #basicfileinput type="file" [accept]="accept" [multiple]="multiple" [disabled]="disabled"
|
||
(change)="onFileSelect($event)" *ngIf="!hasFiles()" (focus)="onFocus()" (blur)="onBlur()">
|
||
</span>
|
||
</div>
|
||
`,
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
encapsulation: ViewEncapsulation.None,
|
||
styles: [".p-fileupload-content{position:relative}.p-fileupload-row{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-fileupload-row>div{-ms-flex:1 1 auto;flex:1 1 auto;width:25%}.p-fileupload-row>div:last-child{text-align:right}.p-fileupload-content .p-progressbar{left:0;position:absolute;top:0;width:100%}.p-button.p-fileupload-choose{overflow:hidden;position:relative}.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}"]
|
||
},] }
|
||
];
|
||
FileUpload.ctorParameters = () => [
|
||
{ type: ElementRef },
|
||
{ type: DomSanitizer },
|
||
{ type: NgZone },
|
||
{ type: HttpClient },
|
||
{ type: ChangeDetectorRef }
|
||
];
|
||
FileUpload.propDecorators = {
|
||
name: [{ type: Input }],
|
||
url: [{ type: Input }],
|
||
method: [{ type: Input }],
|
||
multiple: [{ type: Input }],
|
||
accept: [{ type: Input }],
|
||
disabled: [{ type: Input }],
|
||
auto: [{ type: Input }],
|
||
withCredentials: [{ type: Input }],
|
||
maxFileSize: [{ type: Input }],
|
||
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 }],
|
||
chooseLabel: [{ type: Input }],
|
||
uploadLabel: [{ type: Input }],
|
||
cancelLabel: [{ type: Input }],
|
||
chooseIcon: [{ type: Input }],
|
||
uploadIcon: [{ type: Input }],
|
||
cancelIcon: [{ type: Input }],
|
||
showUploadButton: [{ type: Input }],
|
||
showCancelButton: [{ type: Input }],
|
||
mode: [{ type: Input }],
|
||
headers: [{ type: Input }],
|
||
customUpload: [{ type: Input }],
|
||
fileLimit: [{ 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 }],
|
||
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
|
||
advancedFileInput: [{ type: ViewChild, args: ['advancedfileinput',] }],
|
||
basicFileInput: [{ type: ViewChild, args: ['basicfileinput',] }],
|
||
content: [{ type: ViewChild, args: ['content',] }],
|
||
files: [{ type: Input }]
|
||
};
|
||
class FileUploadModule {
|
||
}
|
||
FileUploadModule.decorators = [
|
||
{ type: NgModule, args: [{
|
||
imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule],
|
||
exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule],
|
||
declarations: [FileUpload]
|
||
},] }
|
||
];
|
||
|
||
/**
|
||
* Generated bundle index. Do not edit.
|
||
*/
|
||
|
||
export { FileUpload, FileUploadModule };
|
||
//# sourceMappingURL=primeng-fileupload.js.map
|