import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { AlertController } from '@ionic/angular'; export interface CustomWindow extends Window { File: any; FileReader: any; } declare let window: CustomWindow; @Component({ selector: 'file-uploader', templateUrl: './file-uploader.component.html', styleUrls: ['./file-uploader.component.scss'] }) export class FileUploaderComponent implements OnInit { @Input() multiupload = false; @Input() attachmentname = 'attachment-loader'; public attachmentData: string; @Input() maxFileSize = 10 * 1024 * 1024; @Output() fileSelected = new EventEmitter(); public inputFiles: any = []; public attachmentImg = 'assets/icon/attachment.png'; public deleteImg = 'assets/icon/delete.png'; constructor( public cs: CommonService, public ts: TranslatorService, public alertController: AlertController ) { } ngOnInit() { } public loadAttachment(changeEvent) { const fileInput = this.getFileElement(); if (this.isFileSupported()) { if (fileInput.files != null && fileInput.files.length > 0) { const file = fileInput.files[0]; const reader = new FileReader(); if (file.size <= this.maxFileSize) { reader.onload = (data) => { if (this.multiupload) { this.inputFiles.push({name: file.name, data: data.target['result']}); } else { this.inputFiles = [{name: file.name, data: data.target['result']}]; } this.fileSelected.emit( { name: file.name , data: data.target['result'], inputFiles: this.inputFiles }); }; reader.readAsDataURL(file); } else { this.attachmentData = null; changeEvent.target.value = ''; // remove current selection this.showFileExceededMaxSize(); } } else { this.attachmentData = null; } } } private isFileSupported() { return (window.FileReader && window.File); } private showFileExceededMaxSize() { this.cs.presentConfirmDialog( this.ts.trPK('general', 'large-file'), () => { this.openFile(); }, () => { } ); } private getFileElement(): HTMLInputElement { return document.getElementById(this.attachmentname) as HTMLInputElement; } public openFile() { const fileInput = this.getFileElement(); fileInput.click(); } public deleteFiles(index: number) { this.inputFiles.splice(index, 1); this.fileSelected.emit( { name: null, data: '', inputFiles: this.inputFiles }); } }