Caricamento di file due volte su server diversi?

Question

Voglio creare due gestori di caricamento file jQuery: uno su server1 e l'altro su server2. Qualcosa di simile a questo:

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

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

Tuttavia quando faccio questo solo il secondo gestore viene chiamato e quindi solo il secondo server riceve il file. Come posso fare in modo che entrambi i server ricevano il file?

UPDATE:

Alcune persone hanno fatto notare queste chiamate sono asincrone che è vero - ma l'approccio di richiamata non funziona nemmeno che è il motivo per cui ho bisogno di aiuto:

$('#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

Ci sto ancora lavorando - mi sto avvicinando ma non ce l'ho proprio capito.

Il mio obiettivo è quando l'utente aggiunge un file, viene caricato su un server e quindi immediatamente su un altro server con impostazioni diverse.

Ecco un'implementazione recente: funziona la prima volta, ma la seconda volta ci sono più chiamate a entrambi i server. Sembra che anche se sto solo inizializzando fileupload() una volta (con un mutex) e stando attento a rimuovere i callback del ciclo di vita nella seconda chiamata, è ancora doppio trigger alla successiva upload di file da parte di qualcuno. Qualche idea?

<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

Prova

$('#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/