Store photo profile with Ionic Storage in a registration APP

Asked

Viewed 618 times

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/

  • I had seen this tutorial, but it’s in Ionic1

  • 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/

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.