How to acheive this input style in ionic 3?

[AzzouN]

I want to add a picture input like this and when the user upload his picture it will be instead of the input

[leonardoss]

There’s no magic for that, you will need to create a div with border and ion-icon for camera, add a click event to open camera or something like that and an ngIf to check if have a picture, if yes show a img element with picture.

To take the picture you can create a Action Sheet:

Use ionic native plugins to access camera and photo library, this will return a base64 string of selected picture, and you need to use this base64 string into your img element.

presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Picture',
      buttons: [
        {
          text: 'Take Picture',
          handler: () => {
               
          }
        },{
          text: 'Choose from Library',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }