Sending more than one http request at once


#1

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');
      
    
  });

      });
});

#2

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.


#3

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().


#4

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


#5

These two claims seem to be contradictory.


#6

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(() => {
    });
});

#7

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


#8

thank you guys it worked !