CODEWITHSUNDEEP
ionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to use file native plugin for updating the profile image in Ionic

I am working in my Ionic App and I want to update the user profile image in ionic using the file input field and the file native plugin.

This is my updateprofileimage.html:

<ion-content padding style="text-align: center;">
  <ion-grid align-items-center justify-content-center style="height: 100%;">
    <ion-row align-items-center justify-content-center style="height: 100%;">
      <ion-col align-self-center justify-content-center col-12 col-md-6 col-xl-3 style="text-align: center;">
        <h2 class="myformh2">Update Profile Picture</h2>
        <h4 class="myformh2">Image Preview</h4>
        <img src="{{img_upload}}" class="newimg22" />
        <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage2()">
          <ion-list>
            <ion-item class="newitem2">
              <ion-input placeholder="Upload Image" type="file" [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
            </ion-item>
            <div>
              <button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary"
                block>Change Profile Picture</button>
            </div>
          </ion-list>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

In this html, I have a file input field and I want to show the preview of the image also.

This is my updateprofileimage.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';
import { ManageaccountPage } from './../manageaccount/manageaccount';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file';
import { FilePath } from '@ionic-native/file-path/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';

@IonicPage()
@Component({
  selector: 'page-updateimage',
  templateUrl: 'updateimage.html',
})
export class UpdateimagePage {
  updateprofileimg : FormGroup;
  img_upload: any = [];
  selectedImage;
  imageUrl;
  converted_image;
  responseEdit: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder, public restProvider: RestapiProvider,
    private storage: Storage, private alertCtrl: AlertController, 
    private filePath: FilePath, private fileChooser: FileChooser, 
    private transfer: FileTransfer, private file: File) {
      this.updateprofileimg = this.formBuilder.group({
        img_upload: ['', Validators.required],
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UpdateimagePage');
  }

  changeProfileImage2()
  {

  this.fileChooser.open()
  .then(uri => console.log(uri))
  .catch(e => console.log(e));

  this.filePath.resolveNativePath(uri)
  .then(filePath => console.log(filePath))
  .catch(err => console.log(err));

  }
}

I have also installed the file and file transfer native plugin but I am not able to use them as I don't know what code to right.

This is my service.ts:

updateprofileimg(credentials, type) {

  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/json');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  let v = new FormData();
  for(var k in credentials)v.append(k,credentials[k]);
  return this.http.post(apiUrl + type, credentials, {headers: headers});
}

I have to send the image to the service for the image to update it to the backend and fetch the image to show as a profile image.

Any help is much appreciated.

Upvotes: 0

Views: 1340

Answers (1)

Jaykant Jha
Jaykant Jha

Reputation: 698

Have a look on the post which may resolve your mentioned issue https://www.djamware.com/post/5ae9c9ca80aca714d19d5b9f/ionic-3-angular-5-and-cordova-base64-image-upload-example

Upvotes: 1

Related Questions