src/app/workspace-admin/files/iqb-files-upload/iqb-files-upload.component.ts
selector | iqb-files-upload |
styleUrls | ../iqb-files.scss |
templateUrl | ./iqb-files-upload.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor(bs: BackendService, wds: WorkspaceDataService)
|
|||||||||
Parameters :
|
file | |
Type : File
|
|
fileAlias | |
Type : string
|
|
Default value : 'file'
|
|
folder | |
Type : string
|
|
Default value : ''
|
|
folderName | |
Type : string
|
|
Default value : ''
|
|
id | |
Type : number
|
|
removeFileRequestEvent | |
Type : EventEmitter
|
|
statusChangedEvent | |
Type : EventEmitter
|
|
class |
Type : string
|
Default value : 'iqb-files-upload'
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
remove |
remove()
|
Returns :
void
|
upload |
upload()
|
Returns :
void
|
Private _file |
Type : File
|
Private _filedate |
Type : number
|
Default value : 0
|
Private _id |
Type : number
|
Private _status |
Type : UploadStatus
|
Private fileUploadSubscription |
Type : Subscription
|
myclass |
Type : string
|
Default value : 'iqb-files-upload'
|
Decorators :
@HostBinding('class')
|
progressPercentage |
Type : number
|
Default value : 0
|
Private requestResponse |
Type : UploadReport
|
Public wds |
Type : WorkspaceDataService
|
status | ||||||
getstatus()
|
||||||
setstatus(newstatus: UploadStatus)
|
||||||
Parameters :
Returns :
void
|
uploadResponse |
getuploadResponse()
|
file | ||||||
getfile()
|
||||||
setfile(file: File)
|
||||||
Parameters :
Returns :
void
|
id | ||||||
getid()
|
||||||
setid(id: number)
|
||||||
Parameters :
Returns :
void
|
import {
Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output
} from '@angular/core';
import { Subscription } from 'rxjs';
import { BackendService } from '../../backend.service';
import { UploadReport, UploadStatus } from '../files.interfaces';
import { WorkspaceDataService } from '../../workspacedata.service';
@Component({
selector: 'iqb-files-upload',
templateUrl: './iqb-files-upload.component.html',
styleUrls: ['../iqb-files.scss']
})
export class IqbFilesUploadComponent implements OnInit, OnDestroy {
@HostBinding('class') myclass = 'iqb-files-upload';
constructor(
private bs: BackendService,
public wds: WorkspaceDataService
) { }
private _status: UploadStatus;
get status(): UploadStatus {
return this._status;
}
set status(newstatus: UploadStatus) {
this._status = newstatus;
this.statusChangedEvent.emit(this);
}
private requestResponse: UploadReport;
get uploadResponse(): UploadReport {
switch (this._status) {
case UploadStatus.busy:
return { '': { info: ['Bitte warten'] } };
case UploadStatus.ready:
return { '': { info: ['Bereit'] } };
default:
return this.requestResponse;
}
}
/* Http request input bindings */
@Input()
fileAlias = 'file';
@Input()
folderName = '';
@Input()
folder = '';
@Input()
get file(): File {
return this._file;
}
set file(file: File) {
this._file = file;
this._filedate = this._file.lastModified;
}
@Input()
set id(id: number) {
this._id = id;
}
get id(): number {
return this._id;
}
@Output() removeFileRequestEvent = new EventEmitter<IqbFilesUploadComponent>();
@Output() statusChangedEvent = new EventEmitter<IqbFilesUploadComponent>();
progressPercentage = 0;
private _file: File;
private _filedate = 0;
private _id: number;
private fileUploadSubscription: Subscription;
ngOnInit(): void {
this._status = UploadStatus.ready;
this.requestResponse = {};
this.upload();
}
upload(): void {
if (this.status !== UploadStatus.ready) {
return;
}
this.status = UploadStatus.busy;
const formData = new FormData();
formData.set(this.fileAlias, this._file, this._file.name);
if ((typeof this.folderName !== 'undefined') && (typeof this.folder !== 'undefined')) {
if (this.folderName.length > 0) {
formData.append(this.folderName, this.folder);
}
}
this.fileUploadSubscription = this.bs.uploadFile(this.wds.wsId, formData)
.subscribe(res => {
this.requestResponse = res.report;
this.status = res.status;
this.progressPercentage = res.progress;
});
}
remove(): void {
if (this.fileUploadSubscription) {
this.fileUploadSubscription.unsubscribe();
}
this.removeFileRequestEvent.emit(this);
}
ngOnDestroy(): void {
if (this.fileUploadSubscription) {
this.fileUploadSubscription.unsubscribe();
}
}
}
<div class="mat-body">
<ng-container *ngIf="status == 1">
<div class="subheading-2">
{{file.name}}
<mat-icon class="cancel" (click)="remove()">cancel</mat-icon>
</div>
<div>
<mat-progress-bar class="upload-progress-bar" [value]="progressPercentage"></mat-progress-bar>
</div>
<div>{{progressPercentage}}%</div>
</ng-container>
<ng-container *ngIf="status > 1">
<ng-container *ngFor="let uploadedFile of uploadResponse | keyvalue">
<div class="subheading-2 {{uploadedFile.value.error ? 'error' : 'success'}}">
{{uploadedFile.key}} - {{uploadedFile.value.error ? 'Abgelehnt' : 'Erfolgreich hochgeladen'}}
</div>
<ng-container *ngFor="let report of uploadedFile.value | keyvalue">
<alert *ngFor="let reportEntry of report.value" [level]="report.key" [text]="reportEntry"></alert>
</ng-container>
</ng-container>
</ng-container>
</div>
../iqb-files.scss
.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-percentage {
font-size: .85rem;
}
.cancel {
cursor: pointer;
outline: none;
float: right;
background: white;
border: 2px solid white;
}