File upload twice to different servers?

Question

I want to make two jQuery file upload handlers - one to server1 and the other to server2. Something like this:

$('#fileupload').fileupload({
              url: 'server1',
              type: 'POST',
              autoUpload: true,
              formData: {
                  ....
              }
          })

$('#fileupload').fileupload({
                              url: 'server2',
                              type: 'POST',
                              autoUpload: true,
                              disableImageResize: false,
                              imageMaxWidth: 200,
                              imageMaxHeight: 200
                          })

However when I do this only the second handler gets called and therefore only the second server receives the file. How can I make both servers receive the file?

UPDATE:

Some people have pointed out these calls are asynchronous which is true - but the callback approach does not work either which is why I need help:

$('#fileupload').fileupload({
                  url: 'server1',
                  type: 'POST',
                  autoUpload: true,
                  formData: {
                      ....
                  }
              }).on('fileuploadstop', function(){

                             $('#fileupload').fileupload({
                                  url: 'server2',
                                  type: 'POST',
                                  autoUpload: true,
                                  disableImageResize: false,
                                  imageMaxWidth: 200,
                                  imageMaxHeight: 200
                              })
});

EDIT 2

I'm still working on this - I'm getting closer but I haven't quite got it.

My goal is when the user adds a file, it gets uploaded to one server, and then immediately to another server with different settings.

Here's a recent implementation - this works the first time, but the second time there are multiple calls to both servers. It appears that even though I am only initializing fileupload() once (with a mutex) and being careful to unset my lifecycle callbacks in the second call, it's still double-triggering the next time someone uploads files. Any ideas?

  <form id="form_file_upload" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" id="fileupload" name="file" multiple>
    <input type="submit" value="Upload">
  </form>

$(function() {
  $('#fileupload').on('change', function(){
      var fileUploadAddFn = function (e, data) {
          // lifecycle callback
          // do stuff
      };

      var fileSetupFirstUpload = function (){
          $('#fileupload').fileupload( // initialize first server
                  'option',
                  {
                      url: 'server1',
                      type: 'POST'
                  }
          );
          $('#fileupload').on('fileuploadaddfn', fileUploadAddFn); // set a lifecycle callback for 1st upload
      };

      var fileSetupSecondUpload = function() {
          $('#fileupload').fileupload( // initialize first server
                  'option',
                  {
                      url: 'server2',
                      type: 'POST'

                  }
          );
          $('#fileupload').off('fileuploadaddfn');
          $('#fileupload').off('fileuploadstop');
      }

      var filesToUpload = $('#fileupload')[0].files; // this works since fileupload is not yet initialized
      if(typeof fileUploadInitialized == 'undefined'){
          $('#fileupload').fileupload();
          fileUploadInitialized = true; // global mutex to only initialize once
      }

      fileSetupFirstUpload();
      $('#fileupload').on('fileuploadstop', function (e, data) {
        fileSetupSecondUpload();
        $('#fileupload').fileupload('add', {files: filesToUpload});
        $('#fileupload').fileupload('send');
      });

      $('#fileupload').fileupload('add', {files: filesToUpload});
      $('#fileupload').fileupload('send');
  });

Answer 1

Try

$('#fileupload').fileupload(); // init
$("#fileupload").on("change", function (e) {
    e.preventDefault();
    // `File` object reference
    var file = e.target.files[0];
    // settings
    var settings = [{
        "files": file,
        "url": "/echo/json/" // `server1`
        //, additional settings
    }, {
        "files": file,
        "url": "/echo/json/" // `server2`
        //, additional settings
    }];
    var request = function (_settings) {
        var jqxhr = $('#fileupload').fileupload('send', _settings);
        return jqxhr
    };

    $.when.apply($(e.target), // set `this`
        $.map(settings, function (data) {
            return request(data)
            .success(function (result, textStatus, jqXHR) {
                // do stuff ,
                // return promise to `then`
                return jqXHR
            })
            .error(function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown // return `errorThrown` to `then`
            })
            .complete(function (result, textStatus, jqXHR) {
                /* ... */
            });
        })
    ).then(function (upload1, upload2) {
        console.log(upload1, upload2, this) // `this` : `$("#fileupload")`
    }, function (err) {
        console.log(err)
    });

});

jsfiddle http://jsfiddle.net/guest271314/8hms1t4k/