ImageBlob not working in android

[MInesGomes]

I can upload a new photo in Web environment, but when I generate the apk and tried to save a photo in android device it gives this error.

o.z.problem.spring.common.AdviceTrait : Bad Request: JSON parse error: Cannot deserialize value of type byte[] from String "image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBA....

The above exception comes in when the property is of type byte[] and json content is represented in String. Jackson thinks that in this case the json data is represented as base64 encoded and tries to decode it to a byte[]. If the string present in data field isn't a properly encoded base64 string, jackson raises the above exception.

Do I have to change something in the Spring class ? Like ...
return (Base64.getEncoder().encode(jsonParser.getText().getBytes()))

or

write images as text in database and send base64 string to server. Like described here
stackoverflow.com angular-5-how-can-i-save-a-user-with-a-blob-avatar

or save just the name of the avatar and get the image to show after like described here?
brianflove.com/2017/11/02/angular-http-client-blob/

All suggestions are very welcome :-)

[ruddell]

I'm guessing that the data is the wrong format when posting, the image data field should not start with image/jpg or contain base64. Here's what it looks like when posting from the Angular client:

{
  "id" : 1,
  "img" : "iVBORw..........RK5CYII=",
  "imgContentType" : "image/jpg"
}

Maybe it's submitting the form value from here? I can't find the save method in the dialog component template but I didn't try generating an app

[MInesGomes]

Great Ruddell! it worked!
I replaced
this.form.patchValue({ [fieldName]: 'data:image/jpg;base64,' + data });
with
this.form.patchValue({ [fieldName]: data });

[mraible]

@ruddell Do you think I need to change the code for both iOS and Android or just Android?

[MInesGomes]

I think the best way to implement should be upload a photo and read the link as they say here ...
Uploading pictures from Ionic 4 / Cordova to Spring Boot

For now my current code for photo ionic4 is,

employee.ts

// == Photo ==
 clearInputImage(field: string, fieldContentType: string, idInput: string) {
   this.formEmp.patchValue({ [field]: '' });
   this.nEmployee.photo = '';
 }

 takePhoto() {
   const camera: any = navigator['camera'];
   camera.getPicture(imageData => {
     // this.uploadPhoto(imageData);
     this.nEmployee.photo = imageData;
     this.formEmp.patchValue({ ['photo']: imageData });
   }, error => { console.log(error); }
     , {
       quality: 10,
       targetWidth: 900,
       targetHeight: 500,
       destinationType: this.camera.DestinationType.DATA_URL,
       // destinationType: camera.DestinationType.FILE_URI,
       sourceType: camera.PictureSourceType.CAMERA,
       encodingType: this.camera.EncodingType.JPEG,
       mediaType: this.camera.MediaType.PICTURE,
       saveToPhotoAlbum: false,
       allowEdit: true
     });
 }

employee.html

     <img *ngIf="nEmployee?.photo" [src]="'data:' + nEmployee?.photoContentType + ';base64,' + nEmployee?.photo" style="height: 40px; max-width: 40px;"   alt="nEmployee image" />
      
     <div *ngIf="nEmployee?.photo">
        <ion-button color="red" (click)="clearInputImage('photo', 'photoContentType', 'fileImage')">
          <ion-icon name="trash">{{ 'DELETE' | translate }}</ion-icon>
        </ion-button>
      </div>

      <ion-button *ngIf="!nEmployee?.photo" size='small'  (click)="takePhoto()">
        <ion-icon slot='start' name="camera"></ion-icon>
        {{ 'ADD_IMAGE' | translate }}
      </ion-button>

I have generated only for android.

I set the destination type to data URL (Camera.DestinationType.DATA_URL), but this returns the file contents as a base64 encoded string and that increases the file size about 30%.

so the best practice should be as the link above (I think) URI ...

[mraible]

I believe this is fixed by #91. Please re-open if it's not.