Sending more than one http request at once

Hi
I have more than one image to upload however I couldn’t upload them at once or create nested http requests , I don’t know why this is happening really but I need a solution for an angry client :frowning:
here is my latest try :

      var url11 = "https://url/api/provider/upload_residency_image";
      var filepath11 = this.nidP;
      console.log(filepath11);
      var options = {
        fileKey: "residency_image",
        fileName : "image",
        httpMethod: "POST",
        mimeType: "image/jpeg",
        params: {id: data.id},
        chunkedMode: true
      }
      const fileTransfer11: TransferObject = this.transfer.create();
      fileTransfer11.upload(filepath11,url11 , options, true).then(function(){
        console.log('uploaded');
        //  upload the four images here (if you couldn't solve it by after noon  split the pics)
       
        var url2 = "https://url/api/provider/upload_car_front";
      var filepath2 = this.tf;
      console.log(filepath2);
      var options = {
        fileKey: "frontside_image",
        fileName : "image",
        httpMethod: "POST",
        mimeType: "image/jpeg",
        params: {id: data.id},
        chunkedMode: true
      }
      const fileTransfer1: TransferObject = this.transfer.create();
      fileTransfer1.upload(filepath2,url2 , options, true).then(function(){
        console.log('uploaded car front');

        var url3 = "https://url/api/provider/upload_car_back";
      var filepath3 = this.tb;
      console.log(filepath2);
      var options = {
        fileKey: "backside_image",
        fileName : "image",
        httpMethod: "POST",
        mimeType: "image/jpeg",
        params: {id: data.id},
        chunkedMode: true
      }
      const fileTransfer2: TransferObject = this.transfer.create();
      fileTransfer2.upload(filepath3,url3 , options, true).then(function(){
        console.log('uploaded car back');
      
    
  });

      });
});

File transfer upload only handle one file upload at a time. You need to call the other uploads in then callback to do nested http requests.

fileTransfer1.upload(path, url, options, true).then(() => {
    fileTransfer2.upload(path, url, options, true).then(() => {
        fileTransfer3.upload(path, url, options, true).then(() => {
        });
    });
    fileTransfer4.upload(path, url, options, true).then(() => {
    });
});

But as you can see the callbacks can get pretty complex and handling these through rxjs observable is a better way and more efficient way to handle complicated combination of sequences.
More about rxjs here: https://www.learnrxjs.io/

What you need to do is to convert upload promise to observable with fromPromise method and use methods in combination such as combineAll that suit your requirement.

Hope it helps.

Do you have any further information on this? I can’t find anything that indicates that this is true.

I think OP’s problem is due to loss of execution context. Use arrow functions instead of function().

What I meant is each upload function only take one file, but the uploads can be parallel.

These two claims seem to be contradictory.

I misread the indentation in OP’s code. @rapropos is right. It is due to loss of execution context as per this question.

Regarding our previous discussion, this is actually what I meant.
FileTransfer 2 and 4 do uploads in parallel.
FileTransfer 2 and 4 are both nested in FileTransfer 1.

fileTransfer1.upload(path, url, options, true).then(() => {
    fileTransfer2.upload(path, url, options, true).then(() => {
        fileTransfer3.upload(path, url, options, true).then(() => {
        });
    });
    fileTransfer4.upload(path, url, options, true).then(() => {
    });
});

I 'm not sure what’s op intention, but seems he might give a try on

thank you guys it worked !