data:image location in ionic3 app

Question

i am making image upload using ionic 3 app and FileReader , after the image is uploaded i get this as image url data:image/jpeg;base64,/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z something like this , then i store it as is into my database i noticed that if i open the app at another device the image will still be loaded and show in the view . so i wounder where does this image go after i upload it? where is it saved in my app ? i tried to look into my app folders couldn't find the img

thanks,

share the code you are using, its hard to help you without further context — Sergey Rudenko

Unknown Unknown · Accepted Answer · 2018-02-11T07:45:00

Here is the code i am using

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'ITEM_CREATE_TITLE' | translate }}</ion-title>
    <ion-buttons start>
      <button ion-button (click)="cancel()">
        <span color="primary" showWhen="ios">
          {{ 'CANCEL_BUTTON' | translate }}
        </span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button (click)="done()" [disabled]="!isReadyToSave" strong>
        <span color="primary" showWhen="ios">
          {{ 'DONE_BUTTON' | translate }}
        </span>
        <ion-icon name="md-checkmark" showWhen="core,android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Ts file:

export class ItemCreatePage {
  @ViewChild('fileInput') fileInput;
  isReadyToSave: boolean;

  item: any;

  form: FormGroup;

  constructor(public navCtrl: NavController, public viewCtrl: ViewController, formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      profilePic: [''],
      name: ['', Validators.required],
      about: ['']
    });

    // Watch the form for changes, and
    this.form.valueChanges.subscribe((v) => {
      this.isReadyToSave = this.form.valid;
    });
  }
  ionViewDidLoad() {

  }

  getPicture() {

      this.fileInput.nativeElement.click();

  }
  processWebImage(event) {
    let reader = new FileReader();
    reader.onload = (readerEvent) => {

      let imageData = (readerEvent.target as any).result;
      this.form.patchValue({ 'profilePic': imageData });
    };

    reader.readAsDataURL(event.target.files[0]);
  }

  getProfileImageStyle() {
    return 'url(' + this.form.controls['profilePic'].value + ')'
  }

  /**
   * The user cancelled, so we dismiss without sending data back.
   */
  cancel() {
    this.viewCtrl.dismiss();
  }

  /**
   * The user is done and wants to create the item, so return it
   * back to the presenter.
   */
  done() {
    if (!this.form.valid) { return; }
    this.viewCtrl.dismiss(this.form.value);
  }
}

data:image location in ionic3 app

1 Answers