angular-material-fileupload
Version:
A fileupload component based on angular-material design
630 lines (620 loc) • 20.5 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 { 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
*/
class BytesPipe {
/**
* @param {?} bytes
* @return {?}
*/
transform(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' },] }
];
/**
* @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
*/
class MatFileUploadQueueService {
constructor() {
this.inputValueSubject = new BehaviorSubject(null);
this.inputValue$ = this.inputValueSubject.asObservable();
}
/**
* @param {?} input
* @return {?}
*/
initialize(input) {
this.inputValueSubject.next(input);
}
/**
* @return {?}
*/
getInputValue() {
return this.inputValueSubject.getValue();
}
}
MatFileUploadQueueService.decorators = [
{ type: Injectable }
];
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
*/
class MatFileUploadComponent {
/**
* @param {?} HttpClient
* @param {?} matFileUploadQueueService
*/
constructor(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 {?} */
const 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;
}
}
/**
* @return {?}
*/
get file() {
return this._file;
}
/**
* @param {?} file
* @return {?}
*/
set file(file) {
this._file = file;
}
/**
* @param {?} id
* @return {?}
*/
set id(id) {
this._id = id;
}
/**
* @return {?}
*/
get id() {
return this._id;
}
/**
* @return {?}
*/
ngOnInit() {
this.uploadProgressSubject.next({
progressPercentage: 0,
loaded: 0,
total: this._file.size,
});
}
/**
* @return {?}
*/
upload() {
this.uploadInProgressSubject.next(true);
// How to set the alias?
/** @type {?} */
let 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 {?}
*/
(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 {?}
*/
(error) => {
if (this.fileUploadSubscription) {
this.fileUploadSubscription.unsubscribe();
}
this.uploadInProgressSubject.next(false);
this.onUpload.emit({ file: this._file, event: event });
}), (/**
* @return {?}
*/
() => this.uploadInProgressSubject.next(false))));
}
/**
* @return {?}
*/
remove() {
this.subs.unsubscribe();
this.removeEvent.emit(this);
}
/**
* @return {?}
*/
ngOnDestroy() {
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 = () => [
{ 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 }]
};
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
*/
class MatFileUploadQueueComponent {
/**
* @param {?} matFileUploadQueueService
* @param {?} changeDetectorRef
*/
constructor(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";
}
/**
* Combined stream of all of the file upload remove change events.
* @return {?}
*/
get fileUploadRemoveEvents() {
return merge(...this.fileUploads.map((/**
* @param {?} fileUpload
* @return {?}
*/
(fileUpload) => fileUpload.removeEvent)));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(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 {?}
*/
ngAfterViewInit() {
// When the list changes, re-subscribe
this._changeSubscription = this.fileUploads.changes
.pipe(startWith(null))
.subscribe((/**
* @return {?}
*/
() => {
if (this._fileRemoveSubscription) {
this._fileRemoveSubscription.unsubscribe();
}
this._listenTofileRemoved();
}));
}
/**
* @private
* @return {?}
*/
_listenTofileRemoved() {
this._fileRemoveSubscription = this.fileUploadRemoveEvents.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
this.files.splice(event.id, 1);
this.changeDetectorRef.markForCheck();
}));
}
/**
* @param {?} file
* @return {?}
*/
add(file) {
this.files.push(file);
this.changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
uploadAll() {
this.fileUploads.forEach((/**
* @param {?} fileUpload
* @return {?}
*/
(fileUpload) => {
fileUpload.upload();
}));
}
/**
* @return {?}
*/
removeAll() {
this.files.splice(0, this.files.length);
this.changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngOnDestroy() {
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 = () => [
{ type: MatFileUploadQueueService },
{ type: ChangeDetectorRef }
];
MatFileUploadQueueComponent.propDecorators = {
fileUploads: [{ type: ContentChildren, args: [forwardRef((/**
* @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 }]
};
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.
*/
class FileUploadInputForDirective {
/**
* @param {?} element
*/
constructor(element) {
this.element = element;
this._queue = null;
this.onFileSelected = new EventEmitter();
this._element = this.element.nativeElement;
}
/**
* @param {?} value
* @return {?}
*/
set fileUploadQueue(value) {
if (value) {
this._queue = value;
}
}
/**
* @return {?}
*/
onChange() {
/** @type {?} */
let 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 {?}
*/
onDrop(event) {
/** @type {?} */
let 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 {?}
*/
onDropOver(event) {
event.preventDefault();
}
}
FileUploadInputForDirective.decorators = [
{ type: Directive, args: [{
selector: "input[fileUploadInputFor], div[fileUploadInputFor]",
},] }
];
/** @nocollapse */
FileUploadInputForDirective.ctorParameters = () => [
{ 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"],] }]
};
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
*/
class MatFileUploadModule {
}
MatFileUploadModule.decorators = [
{ type: NgModule, args: [{
declarations: [
BytesPipe,
MatFileUploadQueueComponent,
MatFileUploadComponent,
FileUploadInputForDirective,
],
imports: [
MatProgressBarModule,
MatCardModule,
MatButtonModule,
MatIconModule,
HttpClientModule,
CommonModule,
],
exports: [
BytesPipe,
MatFileUploadQueueComponent,
MatFileUploadComponent,
FileUploadInputForDirective,
],
},] }
];
/**
* @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