|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|