ionic upload image into wordpress media library via wp rest api

Question

i use ionic camera plugin as well same as this link: https://ionicframework.com/docs/v3/native/camera/

my server is wordpress and my ionic app can upload my images files as well. i can browse from gallery or take new image.

after take new image from camera, user can click on upload button then base64 file appears as well. then he can uploaded but wordpress cant detect it as jpeg or png.

and when i download it cant open with paint or like that

this is my code:

let token = JSON.parse(localStorage.getItem('wpIonicTokenRaahee')).token;
console.log(token);
console.log(this.api_url_post_media);

let headers = new HttpHeaders({
  'cache-control': 'no-cache',
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': `Bearer ${token}`,
  'content-disposition': 'attachment; filename=' + filename + '.jpeg',

});

return this.http.post(this.api_url_post_media, data, { headers: headers });

i tested any content-type like image/png image/jpeg or etc

please help me.. i can upload image via postman... but i dont know how can i convert and upload my base64 file as binary file to my server

saber tabatabaee yazdi saber tabatabaee yazdi · Accepted Answer · 2019-09-13T11:01:21

after try to resolve the error i can find the solution

we need to convert base64 file into blob binary file before post it to wordpress.

https://forum.ionicframework.com/t/how-to-convert-base64-into-an-image/118040/4

getBlob (b64Data) {
    contentType = '';
    sliceSize = 512;

    b64Data = b64Data.replace(/data\:image\/(jpeg|jpg|png)\;base64\,/gi, '');

    let byteCharacters = atob(b64Data);
    let byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      let slice = byteCharacters.slice(offset, offset + sliceSize);

      let byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
      }

      let byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    let blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

i can implement it with ionic3

1- use camera v4 with ionic3

2- use binary file to upload

3- decrease quality of camera via option

4- use jwt plugin to authentication

5- use http.post method

i hadnt any experience with filetransfer but of use this plugin please use version 4 with ionic3

6- if you want you can use pods plugin for create new entities and add them into your wordpress you can search youtube and find 9 videos by Baljeet Singh

ionic upload image into wordpress media library via wp rest api

1 Answers