File

src/app/workspace-admin/files/iqb-files-upload/iqb-files-upload.component.ts

Implements

OnInit OnDestroy

Metadata

selector iqb-files-upload
styleUrls ../iqb-files.scss
templateUrl ./iqb-files-upload.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor(bs: BackendService, wds: WorkspaceDataService)
Parameters :
Name Type Optional
bs BackendService No
wds WorkspaceDataService No

Inputs

file
Type : File
fileAlias
Type : string
Default value : 'file'
folder
Type : string
Default value : ''
folderName
Type : string
Default value : ''
id
Type : number

Outputs

removeFileRequestEvent
Type : EventEmitter
statusChangedEvent
Type : EventEmitter

HostBindings

class
Type : string
Default value : 'iqb-files-upload'

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
remove
remove()
Returns : void
upload
upload()
Returns : void

Properties

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

Accessors

status
getstatus()
setstatus(newstatus: UploadStatus)
Parameters :
Name Type Optional
newstatus UploadStatus No
Returns : void
uploadResponse
getuploadResponse()
file
getfile()
setfile(file: File)
Parameters :
Name Type Optional
file File No
Returns : void
id
getid()
setid(id: number)
Parameters :
Name Type Optional
id number No
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""