My Image uploaded through form is not taking correct path in Ionic

Question

I am working in Ionic app and I have image upload input field and upload button. I want to show the uploaded image as a preview but after uploading the image, it is not taking the image correct path.

Error:

unsafe:C:\fakepath\3.jpg net::ERR_UNKNOWN_URL_SCHEME

This is my updateimage.html:

<ion-content padding style="text-align: center;">
  <h2 class="myformh2">Update Profile Picture</h2>
  <h4 class="myformh2">Image Preview</h4>
  <img src="{{img_upload ? 'http://localhost:8100/assets/imgs/def_face.jpg' : img_upload}}" width="150" style="margin-bottom: 22px;"/>
  <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()">
    <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-content>

In this I am showing the uploaded image as a preview in the img tag but it is showing the error.

This is my updateimage.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-updateimage',
  templateUrl: 'updateimage.html',
})
export class UpdateimagePage {
  updateprofileimg : FormGroup;
  img_upload: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder) {
      this.updateprofileimg = this.formBuilder.group({
        img_upload: ['', Validators.required],
      });
  }

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

  changeProfileImage()
  {
    console.log("Image");
  }

}

The problem is that my upload image using input field is not coming with the proper path to the img tag.

I have also not installed the File and File Transfer Cordova Plugin in my project.

Any Help is much appreciated.

Sudarshana Dayananda Sudarshana Dayananda · Accepted Answer · 2019-02-12T17:12:07

You can use change event on input tag to load image to img tag.

TS

export class UpdateimagePage {

  selectedImage: any;
  imageUrl: any;

  constructor() {}

  onImageSelected(event) {

    this.selectedImage = event.target.files[0];
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
    };
    reader.readAsDataURL(this.selectedImage);
  }
}

HTML

  <img src="{{imageUrl}}" width="150" style="margin-bottom: 22px;"/>
  <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="Upload Image" type="file" (change)="onImageSelected($event)" [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
      </ion-item>
    </ion-list>
  </form>

StackBlitz Demo

One thing to consider. Using img_upload as a string in FormBuilder is not correct. Actually it is not a string, it is a blob. You may uploading this image to server using rest API, then you need to use FormData for uploading image to server. I think this will be helpful to you continuing your work.

My Image uploaded through form is not taking correct path in Ionic

1 Answers