connect-admin/src/app/pages/customization/background-upload.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';

declare var UIkit;

@Component({
  selector: 'background-upload',
  template: `
    <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
    <!--      <span class="uk-text-middle">Attach binaries by dropping them here or</span>-->
    <div  *ngIf="!background.imageFile"  class=" uk-placeholder uk-text-center uk-height-small">
      <span uk-icon="icon: cloud-upload"></span>
      <div uk-form-custom>
        <span class="uk-link uk-margin-small-left"  (click)="file.click()">upload an image</span>
      </div>
    </div>
<!--    <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>-->
    <!--<div *ngIf="!background.imageFile" class=" uk-width-1-1" 
                   style="margin-top: 7px;">
        <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
          <div class=" uk-width-1-1 uk-flex uk-flex-center">
            <button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
                    (click)="file.click()">
              <icon name="cloud_upload" [flex]="true"></icon>
              <span class="uk-margin-small-left">Upload a file</span>
            </button>
          </div>
           
        </div>
      </div>-->
      <div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle  ">
        <div class="uk-card uk-card-default uk-text-center uk-width-expand">
          <img class="uk-height-small uk-width-expand" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
        </div>
        <div class="uk-margin-left">
          <button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
            <icon name="remove"></icon>
          </button>
        </div>
        <div class="uk-margin-small-left">
          <button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
            <icon name="edit"></icon>
          </button>
        </div>
      </div>
    <div class="uk-margin-medium-top">
      <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Position</div>
      <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
      <div class="input-box ">
        <mat-form-field class="uk-width-1-1">
          <!--                      (ngModelChange)="positionChanged()"-->
          <mat-select class="" [(ngModel)]="background.position" name="{{'select_type_'}}"
                      [disableOptionCentering]="true"
                      panelClass="">
            <mat-option [value]="'top'">Top</mat-option>
            <mat-option [value]="'center'">Center</mat-option>
            <mat-option [value]="'bottom'">Bottom</mat-option>

          </mat-select>
        </mat-form-field>
      </div>
    </div>
 
  `
})

export class BackgroundUploadComponent implements OnInit {
  @Input() label:string = "";
  @Input() background;
  @Input() oldBackground;
  // @Input() light:boolean;
  @Input() communityId:string = "";

  public file: File;
  // public photo: string | ArrayBuffer;
  private maxsize: number = 2000 * 1024;
  properties;
  private subscriptions: any[] = [];


  constructor(private utilsService: UtilitiesService) {
  }


  ngOnInit() {
    this.properties = properties;
  }
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }

  removePhoto() {

      if (typeof document != 'undefined') {
        (<HTMLInputElement>document.getElementById("photo")).value = "";
      }
      // this.initPhoto();
    console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
      if(this.background.imageFile != this.oldBackground.imageFile){
        this.deletePhoto();
      }
      this.background.imageFile = null;
      this.file = null;

  }



  public deletePhoto() {
    if (this.background.imageFile) {
      this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" +this.background.imageFile).subscribe());
    }
  }

  fileChangeEvent(event) {
    if (event.target.files && event.target.files[0]) {
      this.file = event.target.files[0];
      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
        UIkit.notification('You must choose a file with type: image/png or image/jpeg!', {
          status: 'danger',
          timeout: 6000,
          pos: 'bottom-right'
        });
        this.removePhoto();
      } else if (this.file.size > this.maxsize) {
         UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)!  ', {
          status: 'danger',
          timeout: 6000,
          pos: 'bottom-right'
        });
        this.removePhoto();
      } else {
        /*const reader = new FileReader();
        reader.readAsDataURL(this.file);
        reader.onload = () => {
          this.background.imageFile = reader.result;

        };*/
        this.save();
      }
    }
  }

  public save() {
    if (this.file) {
      this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/"+ this.communityId + "/" + encodeURIComponent(this.communityId+"-"+this.label)+"?big=1", this.file).subscribe(res => {
        this.deletePhoto();
        this.removePhoto();
        this.background.imageFile = res.filename;

      }, error => {
         UIkit.notification("An error has been occurred during upload your image. Try again later", {
          status: 'danger',
          timeout: 6000,
          pos: 'bottom-right'
        });
      }));
    }
  }
}