Image http.POST Request sends GET Request


#1

Hi,

Two weeks into learning Ionic, I’ve come across another issue I’ve yet to find solution for.

I’m trying to upload a file via a http.post request through a REST API endpoint. I’m trying to emulate a known working way I tested in postman.

This is my code.

public uploadImage() {
  // File for Upload
  var targetPath = this.pathForImage(this.lastImage);
  console.log('targetpath',targetPath);

  //convert to base64
  this.toBase64(targetPath);
}

public toBase64(data){

  this.base64.encodeFile(data).then((base64File: string) => {

  
    this.Image64 = base64File.split(',')[1];
    console.log('processedimage64',this.Image64);

    //convert to binary
    this.convertDataURIToBinary(this.Image64);
  }, (err) => {
    console.log(err);
  });
}


  convertDataURIToBinary(data) {
    var binary_string = atob(data);
    console.log('binary_string',binary_string);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    this.showLoader();

    this.RawBinary = new Blob([new Uint8Array(bytes.buffer)], {type: 'image/jpg'});

    console.log('convertDataURIToBinary uint8array',bytes.buffer);
    console.log('convertDataURIToBinary rawbinary',this.RawBinary);


    //send http post request
    this.postPhoto();
   
  }
  
  postPhoto(){
  
    console.log('auth postphoto fires', this.lastImage);
    return new Promise((resolve, reject) => {
    let headers = new Headers();
        headers.append('Authorization', 'Basic '+ this.authService.BasicAuthString);
        headers.append('Content-Type', 'application/octet-stream');
        headers.append('Content-Disposition','filename='+this.lastImage);
   
    this.http.post(this.authService.apiUrl+'/file/upload/user/user/user_picture?_format=json', this.RawBinary , {headers: headers}).subscribe(res => {
      console.log('uploadimage result',res);
      resolve(res);
    }, (err) => {
      reject(err);
    });
  });
  }

From my understanding of postPhoto() function, it should only be doing an http.post request containing 3 headers specified and a blob of an image file and then do a console log of the response.

My problem is I get this error:

“message”: “No route found for “GET /file/upload/user/user/user_picture”: Method Not Allowed (Allow: POST)”

Which leads me to think my code is sending a GET method instead of a POST.

I’d like to ask for pointers on why my code sends a GET request instead of a POST. Thanks!:smiley: