import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { ActionSheetController, Events, NavController } from '@ionic/angular'; import {CameraOptions, Camera, PictureSourceType} from '@ionic-native/Camera/ngx'; import { FilePath } from '@ionic-native/file-path/ngx'; import { File } from '@ionic-native/file/ngx'; import { TranslatorService } from '../../services/translator/translator.service'; import { Base64 } from '@ionic-native/base64/ngx'; import { DevicePermissionsService } from '../../services/device-permissions/device-permissions.service'; @Component({ selector: 'app-file-uploder-profile', templateUrl: './file-uploder-profile.component.html', styleUrls: ['./file-uploder-profile.component.scss'], }) export class FileUploderProfileComponent implements OnInit { @Input() multiupload = false; @Input() attachmentname = 'attachment-loader'; public attachmentData: string; @Input() maxFileSize = 10 * 1024 * 1024; @Output() fileSelected = new EventEmitter(); @Output() onimgLoad = new EventEmitter(); public image: string; public attachmentImg = 'assets/icon/attachment.png'; public deleteImg = 'assets/icon/delete.png'; public defultProfile = '../../../../assets/imgs/profile.png'; public selectedImage: any; public nativePath: any; public errorMsg: any; public allowdType: any = ['jpg', 'jpeg', 'png']; camera: boolean; constructor( public cameraController: Camera, public actionSheetCtrl: ActionSheetController, public event: Events, public nav: NavController, private filePath: FilePath, // public FileChooser:FileChooser, private file: File, public ts: TranslatorService, public base64: Base64, private permissions: DevicePermissionsService // private chooser: Chooser ) { } ngOnInit() { } @Input() set src(src: string) { this.image = src; } get src(): string { return this.image; } // open the presentsheet // selected attach // need convert // insert or display private permissionsToOpenCamera() { this.permissions.requestCameraAutherization().then(granted => { this.camera = granted as boolean; if (this.camera) { this.openFile(); } } ); } async openFile() { const actionSheet = await this.actionSheetCtrl.create({ header: 'Change Profile Photo', buttons: [{ // text: 'Delete Current Image', // role: 'destructive', // icon: 'trash', // handler: () => { // console.log('Delete clicked'); // this.deleteCurrent(); // } // },{ text: 'Take Photo', icon: 'camera', handler: () => { console.log('Take Photo'); this.takePicture(this.cameraController.PictureSourceType.CAMERA); } }, { text: 'Choose from Library', icon: 'images', handler: () => { console.log('Favorite clicked'); this.takePicture(this.cameraController.PictureSourceType.PHOTOLIBRARY); } }, { text: 'Cancel', icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }] }); await actionSheet.present(); } public takePicture(sourceType: PictureSourceType) { console.log('sourceType: ' + sourceType); const options: CameraOptions = { quality: 50, destinationType: this.cameraController.DestinationType.DATA_URL, encodingType: this.cameraController.EncodingType.JPEG, sourceType, correctOrientation: true, targetWidth: 512, targetHeight: 512 }; this.cameraController.getPicture(options).then(imageData => { const data = 'data:image/jpeg;base64,' + imageData; this.event.publish('Image', {message: 'hello'}); this.selectedImage = 'data:image/jpeg;base64, ' + imageData; this.onimgLoad.emit(this.selectedImage); }); } public deleteCurrent() { // send empty image // this.onimgLoad.emit(""); console.log('deleteCurrent'); this.encodeFiles(this.defultProfile); } readFile(fileUrl: any) { this.filePath.resolveNativePath(fileUrl).then(filePathResult => { this.nativePath = filePathResult; this.file.resolveLocalFilesystemUrl(this.nativePath).then(entry => { entry.getMetadata(metadata => { if (metadata.size <= this.maxFileSize) { this.errorMsg = null; this.encodeFiles(entry); } else { this.errorMsg = this.ts.trPK('general', 'large-file'); } }); }); }); } encodeFiles(entry) { alert('encodeFiles'); this.base64.encodeFile(entry).then( (base64File: string) => { // const type = this.nativePath.substr( // this.nativePath.lastIndexOf(".") + 1 // ); alert('base64File 1' + base64File); // if (this.allowdType.includes(type.toLowerCase())) { // } else { // this.attachmentData = null; // this.errorMsg = this.ts.trPK("general", "not-supported"); // } }, err => { console.log(err); } ); } }