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() { } }