angular-material-fileupload
Version:
A fileupload component based on angular-material design
708 lines (698 loc) • 23.9 kB
JavaScript
import { Pipe, Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ChangeDetectorRef, ContentChildren, forwardRef, Directive, ElementRef, HostListener, NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';
import { HttpEventType, HttpClient, HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
import { __spread } from 'tslib';
import { BehaviorSubject, ReplaySubject, Subscription, merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* Generated from: lib/bytes/bytes.pipe.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BytesPipe = /** @class */ (function () {
function BytesPipe() {
}
/**
* @param {?} bytes
* @return {?}
*/
BytesPipe.prototype.transform = /**
* @param {?} bytes
* @return {?}
*/
function (bytes) {
if (isNaN(parseFloat('' + bytes)) || !isFinite(bytes))
return '-';
if (bytes <= 0)
return '0';
/** @type {?} */
var units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
/** @type {?} */
var number = Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(1) + ' ' + units[number];
};
BytesPipe.decorators = [
{ type: Pipe, args: [{ name: 'bytes' },] }
];
return BytesPipe;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-file-upload-queue/mat-file-upload-queue.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatFileUploadQueueService = /** @class */ (function () {
function MatFileUploadQueueService() {
this.inputValueSubject = new BehaviorSubject(null);
this.inputValue$ = this.inputValueSubject.asObservable();
}
/**
* @param {?} input
* @return {?}
*/
MatFileUploadQueueService.prototype.initialize = /**
* @param {?} input
* @return {?}
*/
function (input) {
this.inputValueSubject.next(input);
};
/**
* @return {?}
*/
MatFileUploadQueueService.prototype.getInputValue = /**
* @return {?}
*/
function () {
return this.inputValueSubject.getValue();
};
MatFileUploadQueueService.decorators = [
{ type: Injectable }
];
return MatFileUploadQueueService;
}());
if (false) {
/**
* @type {?}
* @private
*/
MatFileUploadQueueService.prototype.inputValueSubject;
/** @type {?} */
MatFileUploadQueueService.prototype.inputValue$;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-file-upload/mat-file-upload.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatFileUploadComponent = /** @class */ (function () {
function MatFileUploadComponent(HttpClient, matFileUploadQueueService) {
this.HttpClient = HttpClient;
this.matFileUploadQueueService = matFileUploadQueueService;
this.uploadProgressSubject = new ReplaySubject();
this.uploadProgress$ = this.uploadProgressSubject.asObservable();
this.uploadInProgressSubject = new BehaviorSubject(false);
this.uploadInProgress$ = this.uploadInProgressSubject.asObservable();
this.subs = new Subscription();
this.fileUploadAriaLabel = "File Upload";
this.cancelAriaLabel = "Cancel File Upload";
/**
* Output
*/
this.removeEvent = new EventEmitter();
this.onUpload = new EventEmitter();
/** @type {?} */
var queueInput = this.matFileUploadQueueService.getInputValue();
if (queueInput) {
this.httpUrl = this.httpUrl || queueInput.httpUrl;
this.httpRequestHeaders =
this.httpRequestHeaders || queueInput.httpRequestHeaders;
this.httpRequestParams =
this.httpRequestParams || queueInput.httpRequestParams;
this.fileAlias = this.fileAlias || queueInput.fileAlias;
}
}
Object.defineProperty(MatFileUploadComponent.prototype, "file", {
get: /**
* @return {?}
*/
function () {
return this._file;
},
set: /**
* @param {?} file
* @return {?}
*/
function (file) {
this._file = file;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatFileUploadComponent.prototype, "id", {
get: /**
* @return {?}
*/
function () {
return this._id;
},
set: /**
* @param {?} id
* @return {?}
*/
function (id) {
this._id = id;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatFileUploadComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.uploadProgressSubject.next({
progressPercentage: 0,
loaded: 0,
total: this._file.size,
});
};
/**
* @return {?}
*/
MatFileUploadComponent.prototype.upload = /**
* @return {?}
*/
function () {
var _this = this;
this.uploadInProgressSubject.next(true);
// How to set the alias?
/** @type {?} */
var formData = new FormData();
formData.set(this.fileAlias, this._file, this._file.name);
this.subs.add(this.HttpClient.post(this.httpUrl, formData, {
headers: this.httpRequestHeaders,
observe: "events",
params: this.httpRequestParams,
reportProgress: true,
responseType: "json",
}).subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.type === HttpEventType.UploadProgress) {
_this.uploadProgressSubject.next({
progressPercentage: Math.floor((event.loaded * 100) / event.total),
loaded: event.loaded,
total: event.total,
});
}
_this.onUpload.emit({ file: _this._file, event: event });
}), (/**
* @param {?} error
* @return {?}
*/
function (error) {
if (_this.fileUploadSubscription) {
_this.fileUploadSubscription.unsubscribe();
}
_this.uploadInProgressSubject.next(false);
_this.onUpload.emit({ file: _this._file, event: event });
}), (/**
* @return {?}
*/
function () { return _this.uploadInProgressSubject.next(false); })));
};
/**
* @return {?}
*/
MatFileUploadComponent.prototype.remove = /**
* @return {?}
*/
function () {
this.subs.unsubscribe();
this.removeEvent.emit(this);
};
/**
* @return {?}
*/
MatFileUploadComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subs.unsubscribe();
};
MatFileUploadComponent.decorators = [
{ type: Component, args: [{
selector: "mat-file-upload",
template: "<ng-container *ngIf=\"uploadProgress$ | async as uploadProgress\">\n <mat-card>\n <span class=\"file-summary\">{{ file.name }}({{ file.size | bytes }})</span>\n <div class=\"upload-progress\">\n <mat-progress-bar\n [value]=\"uploadProgress.progressPercentage\"\n ></mat-progress-bar>\n\n <button\n mat-icon-button\n [attr.aria-label]=\"fileUploadAriaLabel\"\n (click)=\"upload()\"\n [disabled]=\"uploadInProgress$ | async\"\n >\n <mat-icon>file_upload</mat-icon>\n </button>\n\n <button\n mat-icon-button\n [attr.aria-label]=\"cancelAriaLabel\"\n (click)=\"remove()\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n </div>\n <span class=\"file-summary\">{{ uploadProgress.progressPercentage }}%</span>\n <span>\n {{ uploadProgress.loaded | bytes }} of\n {{ uploadProgress.total | bytes }}</span\n >\n </mat-card>\n</ng-container>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".file-summary{font-size:.85rem}.upload-progress{display:flex;align-content:center;align-items:center;height:10px}.upload-progress ::ng-deep .mat-progress-bar .mat-progress-bar-element{transition:none}"]
}] }
];
/** @nocollapse */
MatFileUploadComponent.ctorParameters = function () { return [
{ type: HttpClient },
{ type: MatFileUploadQueueService }
]; };
MatFileUploadComponent.propDecorators = {
httpUrl: [{ type: Input }],
httpRequestHeaders: [{ type: Input }],
httpRequestParams: [{ type: Input }],
fileAlias: [{ type: Input }],
file: [{ type: Input }],
id: [{ type: Input }],
fileUploadAriaLabel: [{ type: Input }],
cancelAriaLabel: [{ type: Input }],
removeEvent: [{ type: Output }],
onUpload: [{ type: Output }]
};
return MatFileUploadComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype.uploadProgressSubject;
/** @type {?} */
MatFileUploadComponent.prototype.uploadProgress$;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype.uploadInProgressSubject;
/** @type {?} */
MatFileUploadComponent.prototype.uploadInProgress$;
/** @type {?} */
MatFileUploadComponent.prototype.subs;
/** @type {?} */
MatFileUploadComponent.prototype.httpUrl;
/** @type {?} */
MatFileUploadComponent.prototype.httpRequestHeaders;
/** @type {?} */
MatFileUploadComponent.prototype.httpRequestParams;
/** @type {?} */
MatFileUploadComponent.prototype.fileAlias;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype._file;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype._id;
/** @type {?} */
MatFileUploadComponent.prototype.fileUploadAriaLabel;
/** @type {?} */
MatFileUploadComponent.prototype.cancelAriaLabel;
/**
* Output
* @type {?}
*/
MatFileUploadComponent.prototype.removeEvent;
/** @type {?} */
MatFileUploadComponent.prototype.onUpload;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype.fileUploadSubscription;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype.HttpClient;
/**
* @type {?}
* @private
*/
MatFileUploadComponent.prototype.matFileUploadQueueService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-file-upload-queue/mat-file-upload-queue.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatFileUploadQueueComponent = /** @class */ (function () {
function MatFileUploadQueueComponent(matFileUploadQueueService, changeDetectorRef) {
this.matFileUploadQueueService = matFileUploadQueueService;
this.changeDetectorRef = changeDetectorRef;
this.files = [];
this.httpRequestHeaders = new HttpHeaders();
this.httpRequestParams = new HttpParams();
this.fileAlias = "file";
this.uploadAllColor = "primary";
this.uploadAllLabel = "Upload All";
this.removeAllColor = "primary";
this.removeAllLabel = "Remove All";
}
Object.defineProperty(MatFileUploadQueueComponent.prototype, "fileUploadRemoveEvents", {
/** Combined stream of all of the file upload remove change events. */
get: /**
* Combined stream of all of the file upload remove change events.
* @return {?}
*/
function () {
return merge.apply(void 0, __spread(this.fileUploads.map((/**
* @param {?} fileUpload
* @return {?}
*/
function (fileUpload) { return fileUpload.removeEvent; }))));
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
MatFileUploadQueueComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
this.matFileUploadQueueService.initialize({
httpUrl: changes["httpUrl"] ? changes["httpUrl"].currentValue : undefined,
httpRequestHeaders: changes["httpRequestHeaders"]
? changes["httpRequestHeaders"].currentValue
: undefined,
httpRequestParams: changes["httpRequestParams"]
? changes["httpRequestParams"].currentValue
: undefined,
fileAlias: changes["fileAlias"]
? changes["fileAlias"].currentValue
: undefined,
});
};
/**
* @return {?}
*/
MatFileUploadQueueComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
// When the list changes, re-subscribe
this._changeSubscription = this.fileUploads.changes
.pipe(startWith(null))
.subscribe((/**
* @return {?}
*/
function () {
if (_this._fileRemoveSubscription) {
_this._fileRemoveSubscription.unsubscribe();
}
_this._listenTofileRemoved();
}));
};
/**
* @private
* @return {?}
*/
MatFileUploadQueueComponent.prototype._listenTofileRemoved = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._fileRemoveSubscription = this.fileUploadRemoveEvents.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
_this.files.splice(event.id, 1);
_this.changeDetectorRef.markForCheck();
}));
};
/**
* @param {?} file
* @return {?}
*/
MatFileUploadQueueComponent.prototype.add = /**
* @param {?} file
* @return {?}
*/
function (file) {
this.files.push(file);
this.changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MatFileUploadQueueComponent.prototype.uploadAll = /**
* @return {?}
*/
function () {
this.fileUploads.forEach((/**
* @param {?} fileUpload
* @return {?}
*/
function (fileUpload) {
fileUpload.upload();
}));
};
/**
* @return {?}
*/
MatFileUploadQueueComponent.prototype.removeAll = /**
* @return {?}
*/
function () {
this.files.splice(0, this.files.length);
this.changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MatFileUploadQueueComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._changeSubscription)
this._changeSubscription.unsubscribe();
if (this._fileRemoveSubscription)
this._fileRemoveSubscription.unsubscribe();
if (this.files) {
this.removeAll();
}
};
MatFileUploadQueueComponent.decorators = [
{ type: Component, args: [{
selector: "mat-file-upload-queue",
template: "<ng-content></ng-content>\n<br />\n<button\n mat-raised-button\n [color]=\"uploadAllColor\"\n *ngIf=\"files.length > 0\"\n (click)=\"uploadAll()\"\n>\n {{ uploadAllLabel }}\n</button>\n<button\n mat-raised-button\n [color]=\"removeAllColor\"\n *ngIf=\"files.length > 0\"\n (click)=\"removeAll()\"\n>\n {{ removeAllLabel }}\n</button>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [MatFileUploadQueueService],
styles: [""]
}] }
];
/** @nocollapse */
MatFileUploadQueueComponent.ctorParameters = function () { return [
{ type: MatFileUploadQueueService },
{ type: ChangeDetectorRef }
]; };
MatFileUploadQueueComponent.propDecorators = {
fileUploads: [{ type: ContentChildren, args: [forwardRef((/**
* @return {?}
*/
function () { return MatFileUploadComponent; })),] }],
httpUrl: [{ type: Input }],
httpRequestHeaders: [{ type: Input }],
httpRequestParams: [{ type: Input }],
fileAlias: [{ type: Input }],
uploadAllColor: [{ type: Input }],
uploadAllLabel: [{ type: Input }],
removeAllColor: [{ type: Input }],
removeAllLabel: [{ type: Input }]
};
return MatFileUploadQueueComponent;
}());
if (false) {
/** @type {?} */
MatFileUploadQueueComponent.prototype.fileUploads;
/**
* Subscription to remove changes in files.
* @type {?}
* @private
*/
MatFileUploadQueueComponent.prototype._fileRemoveSubscription;
/**
* Subscription to changes in the files.
* @type {?}
* @private
*/
MatFileUploadQueueComponent.prototype._changeSubscription;
/** @type {?} */
MatFileUploadQueueComponent.prototype.files;
/** @type {?} */
MatFileUploadQueueComponent.prototype.httpUrl;
/** @type {?} */
MatFileUploadQueueComponent.prototype.httpRequestHeaders;
/** @type {?} */
MatFileUploadQueueComponent.prototype.httpRequestParams;
/** @type {?} */
MatFileUploadQueueComponent.prototype.fileAlias;
/** @type {?} */
MatFileUploadQueueComponent.prototype.uploadAllColor;
/** @type {?} */
MatFileUploadQueueComponent.prototype.uploadAllLabel;
/** @type {?} */
MatFileUploadQueueComponent.prototype.removeAllColor;
/** @type {?} */
MatFileUploadQueueComponent.prototype.removeAllLabel;
/**
* @type {?}
* @private
*/
MatFileUploadQueueComponent.prototype.matFileUploadQueueService;
/**
* @type {?}
* @private
*/
MatFileUploadQueueComponent.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/file-upload-input-for/file-upload-input-for.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* A material design file upload queue component.
*/
var FileUploadInputForDirective = /** @class */ (function () {
function FileUploadInputForDirective(element) {
this.element = element;
this._queue = null;
this.onFileSelected = new EventEmitter();
this._element = this.element.nativeElement;
}
Object.defineProperty(FileUploadInputForDirective.prototype, "fileUploadQueue", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this._queue = value;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
FileUploadInputForDirective.prototype.onChange = /**
* @return {?}
*/
function () {
/** @type {?} */
var files = this.element.nativeElement.files;
this.onFileSelected.emit(files);
for (var i = 0; i < files.length; i++) {
this._queue.add(files[i]);
}
this.element.nativeElement.value = "";
};
/**
* @param {?} event
* @return {?}
*/
FileUploadInputForDirective.prototype.onDrop = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var files = event.dataTransfer.files;
this.onFileSelected.emit(files);
for (var i = 0; i < files.length; i++) {
this._queue.add(files[i]);
}
event.preventDefault();
event.stopPropagation();
this.element.nativeElement.value = "";
};
/**
* @param {?} event
* @return {?}
*/
FileUploadInputForDirective.prototype.onDropOver = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
};
FileUploadInputForDirective.decorators = [
{ type: Directive, args: [{
selector: "input[fileUploadInputFor], div[fileUploadInputFor]",
},] }
];
/** @nocollapse */
FileUploadInputForDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
FileUploadInputForDirective.propDecorators = {
onFileSelected: [{ type: Output }],
fileUploadQueue: [{ type: Input, args: ["fileUploadInputFor",] }],
onChange: [{ type: HostListener, args: ["change",] }],
onDrop: [{ type: HostListener, args: ["drop", ["$event"],] }],
onDropOver: [{ type: HostListener, args: ["dragover", ["$event"],] }]
};
return FileUploadInputForDirective;
}());
if (false) {
/**
* @type {?}
* @private
*/
FileUploadInputForDirective.prototype._queue;
/**
* @type {?}
* @private
*/
FileUploadInputForDirective.prototype._element;
/** @type {?} */
FileUploadInputForDirective.prototype.onFileSelected;
/**
* @type {?}
* @private
*/
FileUploadInputForDirective.prototype.element;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/mat-file-upload.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatFileUploadModule = /** @class */ (function () {
function MatFileUploadModule() {
}
MatFileUploadModule.decorators = [
{ type: NgModule, args: [{
declarations: [
BytesPipe,
MatFileUploadQueueComponent,
MatFileUploadComponent,
FileUploadInputForDirective,
],
imports: [
MatProgressBarModule,
MatCardModule,
MatButtonModule,
MatIconModule,
HttpClientModule,
CommonModule,
],
exports: [
BytesPipe,
MatFileUploadQueueComponent,
MatFileUploadComponent,
FileUploadInputForDirective,
],
},] }
];
return MatFileUploadModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: projects.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: angular-material-fileupload.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { FileUploadInputForDirective, MatFileUploadComponent, MatFileUploadModule, MatFileUploadQueueComponent, BytesPipe as ɵa, MatFileUploadQueueService as ɵb };
//# sourceMappingURL=angular-material-fileupload.js.map