I implemented img with input display none, and I don’t geting image to sabe in firebase, in my view I have
<img [src]="user.avatar != '' ? user.avatar : croppedImagepath" alt="" (click)="optionUploadImage()">
<ion-input type="file" formControlName="avatar" style="display: none"></ion-input>
and in my TS, I have
initForm() {
this.form = this.fb.group({
name: [this.user.name, Validators.required],
email: [this.user.email, Validators.required],
password: [this.user.password, Validators.required],
avatar: [''],
});
}
save() {
this.clicked = true;
this.form.value['id'] = JSON.parse(localStorage.getItem('user'))['uid'];
this.form.value['avatar'] = this.croppedImagepath;
console.log(this.form.value)
// this.service.updateUser(this.form.value)
// .then(() => {
// this.toast.message('Perfil atualizado com sucesso!');
// setTimeout(() => {
// this.dismiss();
// }, 1500);
// })
// .catch(e => {
// this.clicked = false;
// console.log(e)
// })
}
async optionUploadImage() {
const actionSheet = await this.actionSheetController.create({
header: 'Selecionar foto',
buttons: [{
text: 'Galeria',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Camera',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancelar',
role: 'cancel'
}]
});
await actionSheet.present();
}
takePicture(sourceType: PictureSourceType) {
const options: CameraOptions = {
quality: 100,
sourceType: sourceType,
cameraDirection: this.camera.Direction.BACK,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE
};
this.camera.getPicture(options).then(imageData => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
// this.imageDefault = 'data:image/jpeg;base64,' + imageData;
this.cropImage(imageData)
});
}
cropImage(fileUrl) {
this.crop.crop(fileUrl, { quality: 50 })
.then(newPath => {
this.showCroppedImage(newPath.split('?')[0])
},
error => {
alert('Error cropping image' + error);
}
);
}
showCroppedImage(ImagePath) {
this.isLoading = true;
var copyPath = ImagePath;
var splitPath = copyPath.split('/');
var imageName = splitPath[splitPath.length - 1];
var filePath = ImagePath.split(imageName)[0];
this.file.readAsDataURL(filePath, imageName).then(base64 => {
this.croppedImagepath = base64;
this.isLoading = false;
}, error => {
alert('Error in showing image' + error);
this.isLoading = false;
});
}
I wanto to send to my service
upload(user: User) {
let fileRef = this.storage.ref('users/' + user.id + ".jpg");
fileRef.put(user.avatar).then(function(snapshot) {
return console.log(snapshot);
});
}