0
I’m new in web programming and Ionic 3 and need a help, I created an app to make a simple registration and save in internal Torage, but wanted to save the photo of the person profile, how to select the photo that is on the device, copy to a default folder and save the link to be displayed on the page?
My Provider
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';
import { DatePipe } from '@angular/common';
@Injectable()
export class ContactProvider {
constructor(private storage: Storage, private datepipe: DatePipe) { }
public insert(contact: Contact) {
let key = this.datepipe.transform(new Date(), "ddMMyyyyHHmmss");
return this.save(key, contact);
}
public update(key: string, contact: Contact) {
return this.save(key, contact);
}
private save(key: string, contact: Contact) {
return this.storage.set(key, contact);
}
public remove(key: string) {
return this.storage.remove(key);
}
public getAll() {
let contacts: ContactList[] = [];
return this.storage.forEach((value: Contact, key: string, iterationNumber: Number) => {
let contact = new ContactList();
contact.key = key;
contact.contact = value;
contacts.push(contact);
})
.then(() => {
return Promise.resolve(contacts);v b
})
.catch((error) => {
return Promise.reject(error);
});
}
}
export class Contact {
name: string;
lastname: string;
password: string;
phone: number;
birth: Date;
active: boolean;
}
export class ContactList {
key: string;
contact: Contact;
}
Edit-contact.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { ContactProvider, Contact } from '../../providers/contact/contact';
@IonicPage()
@Component({
selector: 'page-edit-contact',
templateUrl: 'edit-contact.html',
})
export class EditContactPage {
model: Contact;
key: string;
constructor(public navCtrl: NavController, public navParams: NavParams, private contactProvider: ContactProvider, private toast: ToastController) {
if (this.navParams.data.contact && this.navParams.data.key) {
this.model = this.navParams.data.contact;
this.key = this.navParams.data.key;
} else {
this.model = new Contact();
}
}
save() {
this.saveContact()
.then(() => {
this.toast.create({ message: 'Contato salvo.', duration: 3000, position: 'botton' }).present();
this.navCtrl.pop();
})
.catch(() => {
this.toast.create({ message: 'Erro ao salvar o contato.', duration: 3000, position: 'botton' }).present();
});
}
private saveContact() {
if (this.key) {
return this.contactProvider.update(this.key, this.model);
} else {
return this.contactProvider.insert(this.model);
}
}
public type = 'password';
public showPass = false;
showPassword() {
this.showPass = !this.showPass;
if(this.showPass){
this.type = 'text';
} else {
this.type = 'password';
}
}
}
and the HTML I use to edit the contact
<ion-header>
<ion-navbar>
<ion-title>
Usuário
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Nome</ion-label>
<ion-input type="text" name="name" [(ngModel)]="model.name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Sobrenome</ion-label>
<ion-input type="text" name="lastname" [(ngModel)]="model.lastname"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="{{type}}" name="password" [(ngModel)]="model.password" required pattern=".{4,10}"></ion-input>
<button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> <ion-icon name="ios-eye-off-outline"></ion-icon></button>
<button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> <ion-icon name="ios-eye-outline"></ion-icon></button>
</ion-item>
<ion-item>
<ion-label stacked>Telefone</ion-label>
<ion-input type="tel" name="phone" [(ngModel)]="model.phone"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Nascimento</ion-label>
<ion-datetime displayFormat="DD/MM/YYYY" name="birth" [(ngModel)]="model.birth"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Ativo</ion-label>
<ion-checkbox name="active" [(ngModel)]="model.active"></ion-checkbox>
</ion-item>
</ion-list>
<button ion-button block (click)="save()">Salvar</button>
</ion-content>
This may help you: https://dbwriteups.wordpress.com/2015/09/19/saving-images-to-app-storage-in-ionic-using-ngcordova/
– Samuel Rizzon
I had seen this tutorial, but it’s in Ionic1
– Ricardo Martani Stancatti
To select a (or more) photo of the person on the device, I suggest using the image Picker plugin: https://ionicframework.com/docs/native/image-picker/
– Tobias Arantes