upload-image-with-preview.component.ts 3.85 KB
import {Component, EventEmitter, Input, OnChanges, OnDestroy, Output} from '@angular/core';
import { NzMessageService, UploadXHRArgs, UploadFile } from 'ng-zorro-antd';


@Component({
  selector: 'app-upload-image-with-preview',
  templateUrl: './upload-image-with-preview.component.html',
  styleUrls: ['./upload-image-with-preview.component.scss']
})
export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
  uploading = false;
  progress = 0;
  @Input()
  picUrl;
  @Input()
  canDelete = false;
  @Output()
  imageUploaded = new EventEmitter();
  @Output()
  imageUploadFailure = new EventEmitter();
  @Output()
  delete = new EventEmitter();
  @Input()
  picItem = null;
  @Input()
  iconSize = 2;
  @Input()
  TIP = 'Click here to upload image';
  @Input()
  disableUpload = false;

  uploadUrl;
  uploadData;

  constructor(private nzMessageService: NzMessageService) {

    this.uploadUrl = (<any> window).courseware.uploadUrl();
    this.uploadData = (<any> window).courseware.uploadData();

    window['air'].getUploadCallback = (url, data) => {
      this.uploadUrl = url;
      this.uploadData = data;
    };

  }
  ngOnChanges() {
    if (!this.picItem) {
      return;
    }
  }





  handleChange(info: { type: string, file: UploadFile, event: any }): void {

    console.log('info:' , info);

    switch (info.type) {
      case 'start':
        // this.isUploading = true;
        // this.progress = 0;

        this.picUrl = null;
        // this.beforeUpload(item.file as any);
        if (!this.checkSelectFile(info.file)) {
          return;
        }
        this.uploading = true;
        this.progress = 0;

        break;

      case 'success':
        // this.isUploading = false;
        // this.uploadSuccess(info.file.response);
        // this.audioUploaded.emit(info.file.response);

        this.uploadSuccess(info.file);

        break;
      case 'progress':
        this.progress = parseInt(info.event.percent, 10);
        this.doProgress(this.progress);
        break;
    }
  }

  onDelete() {
    this.delete.emit();
  }
  checkSelectFile(file) {
    const isImg = ['image/jpeg', 'image/png', 'image/jpeg', 'image/gif', 'image/bmp'].includes(file.type);
    if (!isImg) {
      this.nzMessageService.error('You can only upload Image file (jpg|gif|png|bmp)');
      return false;
    }
    const isGif = !['image/jpeg', 'image/png', 'image/jpeg', 'image/bmp'].includes(file.type);
    const delta = isGif ? 20 : 5;
    const isOverSize = file.size / 1024 / 1024 < delta;
    if (!isOverSize) {
      this.nzMessageService.error(`${isGif ? 'Gif' : 'Image'} must smaller than ${delta}MB!`);
      return false;
    }
    return true;
  }

  uploadSuccess = (file) => {
    this.nzMessageService.info('Upload Success');
    this.uploading = false;
    this.picUrl = file.response.url ;
    // this.uploadFinished(url);
    // if (!inOSS) {
    const img = new Image();
    img.addEventListener('load', () => {

      const height = img.naturalHeight;
      const width = img.naturalWidth;
      file['height'] = height;
      file['width'] = width;
      img.remove();
      this.imageUploaded.emit(file.response);
      // this.resService.updateImage(id, {width, height}).then( () => {
      //   this.imageUploaded.emit({res_id: id, id, name, hash, url});
      // });

    });
    img.src = file.response.url;
    // } else {
    //   this.imageUploaded.emit({res_id: id, id, name, hash, url});
    // }
  }

  uploadFailure = (err, file) => {
    this.uploading = false;
    if (err.name && err.name === 'cancel') {
      return;
    }
    console.log(err);
    this.nzMessageService.error('Upload Error ' + err.message);
    this.imageUploadFailure.emit(file);
  }

  doProgress = function(p) {
    if (p > 1) {
      p = 1;
    }
    if (p < 0) {
      p = 0;
    }
    // console.log(Math.floor(p * 100));
    this.progress =  Math.floor(p * 100);
  }
  ngOnDestroy() {
  }

}