Can not upload image to the server on android

[keloa]

Hey
I wrote a code to upload an image to the server , I’ve tested the code on iOS and it worked great!
however when I tested the the same code on an android device it didn’t work , the back-end shows me an error telling me that the file with the name (the file name) is missing , so what I think is that the problem is with the field in the post request

here is my code :

 var url5 = "url/api/provider/upload_car_left";
      var filepath5 = this.tl;
      console.log(filepath5);
      var options = {
        fileKey: "leftside_image",
        fileName : "image",
        httpMethod: "POST",
        mimeType: "image/jpeg",
        params: {id: data.message.id},
        chunkedMode: true
      }
      const fileTransfer4: TransferObject = this.transfer.create();
      fileTransfer4.upload(filepath5,url5 , options, true).then(function(){
        console.log('uploaded car left');
        this.ctl = true;
      });

[Sujan12]

@keloa

the back-end shows me an error telling me that the file with the name (the file name) is missing

What is the exact error message?

[keloa]

here is the server error :

D/FileTransfer: response code: 200
D/FileTransfer: response headers: {null=[HTTP/1.1 200 OK], Cache-Control=[no-cache, private], Connection=[Keep-Alive], Content-Type=[application/json], Date=[Sat, 17 Jun 2017 16:38:20 GMT], Keep-Alive=[timeout=5, max=100], Server=[Apache], Vary=[Accept-Encoding,User-Agent], X-Android-Received-Millis=[1497717545726], X-Android-Response-Source=[NETWORK 200], X-Android-Selected-Protocol=[http/1.1], X-Android-Sent-Millis=[1497717540436], X-RateLimit-Limit=[60], X-RateLimit-Remaining=[59]}
D/FileTransfer: got response from server
D/FileTransfer: {"resType":"validation","msg":{"leftside_image":["\u0627\u0644\u062d\u0642\u0644 leftside image \u0645\u0637\u0644\u0648\u0628."]}}
D/SystemWebChromeClient: file:///android_asset/www/build/main.js: Line 62180 : uploaded car left
I/chromium: [INFO:CONSOLE(62180)] "uploaded car left", source: file:///android_asset/www/build/main.js (62180)
D/SystemWebChromeClient: file:///android_asset/www/build/main.js: Line 1365 : ERROR
I/chromium: [INFO:CONSOLE(1365)] "ERROR", source: file:///android_asset/www/build/main.js (1365)

as you can see there is a response from the server , but it says that the leftside_image is missing
but the problem is that with the same code I was able to upload the file from the iOS system successfully

and here is the function which take the photo :

takePick(im){
console.log(im);
var options: CameraOptions = {
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      console.log(imageData);
      switch(im){
      case 'nid' : {
      this.nidP = imageData;
      console.log('nid');
      break;  
        
      
    }
    case 'tf' : {
      console.log('tf');
      this.tf = imageData;
      break;
    }
    case 'tb' : {
      this.tb = imageData;
      console.log('tb');
      break;
    }
    case 'tr' : {
      this.tr = imageData;
      console.log('tr');
      break;
    }
    case 'tl' : {
      this.tl = imageData;
      console.log('tl');
      
      break;
      } 
    }
      
    }, (err) => {
      console.log('test5');
      // Handle error
    });

}

[rapropos]

I’m probably reading this wrong, but how can a server return a status code of 200 in an error situation?

[keloa]

well the developer who developed the back-end used other messages , however the 200 is the http response not the json response I don’t know why he did it that way , anyway it works for the iOS just fine I don’t understand why it doesn’t work on the android !

[Sujan12]

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the network tabs for the payload of the upload - maybe it is there but in a wrong format or something?

[keloa]

I didn’t understand how the network tab works !
here is an image

I don’t see anything interesting (actually it’s empty) , I don’t see the http request or the file uploading processes and for the files I only see the local files (the design images … etc)

the console looks great , no errors and the values are correct

here is a part of the console output :

as you can see the photo is existing and I’ve prebted the http options and its correct !
I’m losing my mind here

[Sujan12]

Oh right, fileTransfer is https://ionicframework.com/docs/native/transfer/? The you chose the wrong topic category (changed it for you to Ionic Native) and the call is made by the native part on won’t show in the dev tools.

Use a proxy like Charles Web Proxy to set yourself between the app and the server and see the request then.

[keloa]

I used Charles but every thing seems to work as expected :

I have more than one request , the first one is to register an account(which doesn’t upload any file), and the one is to upload a photo
the first request works great and I can find the new member in my dashboard , but the image doesn’t get uploaded (and I’m saying this again the problem is only in the android version , the iOS version is fine) , someone told me that it could be a problem with asynchronous what do you think ?

[Sujan12]

If there is a request with the correct payload, then it can not be a problem with your code - right?

Compare the requests from iOS and Android and see what is different. Or debug it directly in your backend to see why it doesn’t like the image.

[keloa]

I’m not sure how I can debug from the server if the server didn’t recognize the file

[Sujan12]

Whatever data arrives at your server can be debugged - logging, live debugging, print statements.

[keloa]

I’ve solved the problem finally !!
I had to change :

chunkedMode: true

to

chunkedMode: false

and the problem was solved !

[Sujan12]

Ah, so the server doesn’t support this and upload therefore failed?

[keloa]

I think the server support the feature but the problem was with android , because it works fine in the iOS