File
Implements
Metadata
exportAs |
iqbFilesUploadQueue |
selector |
iqb-files-upload-queue |
styleUrls |
../iqb-files.scss |
templateUrl |
iqbFilesUploadQueue.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
httpRequestHeaders
|
Type : HttpHeaders | literal type
|
Default value : new HttpHeaders().set('Content-Type', 'multipart/form-data')
|
|
httpRequestParams
|
Type : HttpParams | literal type
|
Default value : new HttpParams()
|
|
Methods
add
|
add(file: any)
|
|
Parameters :
Name |
Type |
Optional |
file |
any
|
No
|
|
analyseStatus
|
analyseStatus()
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
Public
removeAll
|
removeAll()
|
|
|
Public
disableClearButton
|
Default value : true
|
|
Public
files
|
Type : Array<any>
|
Default value : []
|
|
import {
Component, EventEmitter, OnDestroy, QueryList, ViewChildren, Input, Output
} from '@angular/core';
import { HttpHeaders, HttpParams } from '@angular/common/http';
import { IqbFilesUploadComponent, UploadStatus } from '../iqbFilesUpload/iqbFilesUpload.component';
@Component({
selector: 'iqb-files-upload-queue',
templateUrl: 'iqbFilesUploadQueue.component.html',
exportAs: 'iqbFilesUploadQueue',
styleUrls: ['../iqb-files.scss']
})
export class IqbFilesUploadQueueComponent implements OnDestroy {
@ViewChildren(IqbFilesUploadComponent) fileUploads: QueryList<IqbFilesUploadComponent>;
public files: Array<any> = [];
public disableClearButton = true;
/* Http request input bindings */
@Input()
httpUrl: string;
@Input()
httpRequestHeaders: HttpHeaders | {
[header: string]: string | string[];
} = new HttpHeaders().set('Content-Type', 'multipart/form-data');
@Input()
httpRequestParams: HttpParams | {
[param: string]: string | string[];
} = new HttpParams();
@Input()
fileAlias: string;
@Input()
folderName: string;
@Input()
folder: string;
@Output() uploadCompleteEvent = new EventEmitter<IqbFilesUploadQueueComponent>();
add(file: any): void {
this.files.push(file);
}
public removeAll(): void {
this.files.splice(0, this.files.length);
}
ngOnDestroy(): void {
if (this.files) {
this.removeAll();
}
}
removeFile(fileToRemove: IqbFilesUploadComponent): void {
this.files.splice(fileToRemove.id, 1);
}
analyseStatus(): void {
let someoneiscomplete = false;
let someoneisbusy = false;
let someoneisready = false;
this.fileUploads.forEach(fileUpload => {
if ((fileUpload.status === UploadStatus.ok) || (fileUpload.status === UploadStatus.error)) {
someoneiscomplete = true;
} else if (fileUpload.status === UploadStatus.busy) {
someoneisbusy = true;
} else if (fileUpload.status === UploadStatus.ready) {
someoneisready = true;
}
});
if (someoneiscomplete && !someoneisbusy) {
this.uploadCompleteEvent.emit();
this.disableClearButton = false;
}
}
}
<mat-card *ngIf="files.length > 0">
<mat-card-header>
<mat-card-title>Upload-Report</mat-card-title>
</mat-card-header>
<iqb-files-upload
*ngFor="let file of files; let i = index"
[file]="file"
[id]="i"
[httpUrl]="httpUrl"
[fileAlias]="fileAlias"
[folderName]="folderName"
[folder]="folder"
(removeFileRequestEvent)="removeFile($event)"
(statusChangedEvent)="analyseStatus()">
</iqb-files-upload>
<mat-card-actions>
<button *ngIf="!disableClearButton" (click)="removeAll()" mat-raised-button color="primary">OK</button>
</mat-card-actions>
</mat-card>
.subheading-2 {
color: #003333;
margin-bottom: 0.7em;
margin-top: 1.7em;
border-bottom: 1px solid silver;
}
.subheading-2.success {
color: green
}
.subheading-2.error {
color: #821324
}
.upload-progress {
display: flex;
align-content: center;
align-items: center;
height: 25px;
}
.file-info {
font-size: .85rem;
}
.action {
cursor: pointer;
outline: none;
}
Legend
Html element with directive