Uploaded picture doesn't refresh on view when testing on device

Ionic Framework ionic-v3
1

I’ve made a simple profile page, which shows the user profile picture. That picture is stored in an Amazon S3 bucket. The page also contains buttons to get a new picture from camera (bind to getCameraPicture() method), and to upload the new picture to S3 (bind to uploadPicture() method). Here is the relevant code:

<ion-avatar>
  <img [src]="client?.imageUrl || 'assets/imgs/avatar-blank.png'">
</ion-avatar>

(...)

<button ion-button block (click)="getCameraPicture()">Get picture from camera</button>

<button ion-button block (click)="uploadPicture()">Upload picture</button>

Here is the code for getCameraPicture() method:

getCameraPicture() {
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.PNG,
    mediaType: this.camera.MediaType.PICTURE
  }

  this.camera.getPicture(options).then((imageData) => {
    this.picture = 'data:image/png;base64,' + imageData;
  });
}

And here is the code for uploadPicture() method (notice the location.reload() call I made, which I believe (but not sure) is a viable way to force refreshing page data with the new uploaded picture):

uploadPicture() {
  this.clientService.uploadPicture(this.picture)
    .subscribe(response => {
      this.picture = null;
      location.reload();
    });
}

That clientService.uploadPicture method is a simple service method that calls an endpoint from my backend, which uploads the picture to Amazon S3.

This works fine when testing the app in browser through ionic cordova run browser: I can upload a new picture, and that picture instantly appears as the new rendered picture in my view.

However, when testing the app in my Android devide through ionic cordova run android --device, I still can upload a new picture (I check in my S3 bucket and the new picture is there), but the view doesn’t update! It take several HOURS to see the updated picture in my app view when running it on Android device.

So how can I force picture refresh in my app on device? Thanks.

2

You can have two options here.

  1. After getPicture assign this.picture to img src
<ion-avatar>
  <img [src]="picture" [alt]="alt">
</ion-avatar>

constructor(....) {
    this.picture = "client?.imageUrl || 'assets/imgs/avatar-blank.png'";
    this.alt = "client?.imgAlt || ''";
}
this.camera.getPicture(options).then((imageData) => {
    this.picture = 'data:image/png;base64,' + imageData;
  });

this will direct bind the image data on img src.

or else you can write a code at backend to get uploaded img url in the response of uploadImg as you know that where the file is being uploaded. After upload success get that file path and simply include it in service response. and assign that url to picture like this.

uploadPicture() {
  this.clientService.uploadPicture(this.picture)
    .subscribe(response => {
      this.picture = response.uploadedImgUrl;
      this.alt = response.uploadedImgName;
    });
}

Hope this will help you. :slight_smile:

3

Dear Heenavora. Thank you for your answer. The key to solve the problem really was related to update que value of [src]. I’ve made changes based on your sugestion :wink:

Regards