title: How to use when then to send file upload sequentially in a function that is also a deferred promise?
body: <p>I intend to upload an array of files using jQuery.</p>
  
  <p>This intention is wrapped in a function called <code>uploadFilesUsingAjax()</code>;</p>
  
  <pre><code>var uploadFilesPromise = uploadFilesUsingAjax();
  
  $.when(uploadFilesPromise).done(function (uploadFilesAjaxResult) {
          // redirect to success page...
  </code></pre>
  
  <p>I need to wait for all the files to be uploaded successfully before doing something else.</p>
  
  <p>Inside <code>uploadFilesUsingAjax()</code>, </p>
  
  <p>I wrote my code this way</p>
  
  <pre><code>function uploadFilesUsingAjax() {
      var files = pages; // pages is a global variable which is an array of files
      var url = "/users/" + currentUser.id + "/files.json";
      var type = "POST";
  
      console.info('files length:' + files.length);
      if (files.length &gt; 0) {
  
          var promises=[];
          for (var i = 0; i &lt; files.length; i++) {
              var data = new FormData();
              var postData = {};
              var file = files.getByIndex(i);
              var key = i + 1;
              if (typeof (file.id) !== "undefined" &amp;&amp; file.id &gt; 0) {
                  data.append(key, JSON.stringify(file));
              } else {
                  data.append(key, file);
              }
              var request = $.ajax({
                  //this is the php file that processes the data 
                  url: url,
  
                  //POST method is used
                  type: type,
  
                  //pass the data
                  data: data,
  
                  //Do not cache the page
                  cache: false,
  
                  xhr: function() {
                      // custom xhr
                      myXhr = $.ajaxSettings.xhr();
                      if(myXhr.upload) { // check if upload property exists
  
                              myXhr.upload.addEventListener('progress',updatePagesProgress, false); // for handling the progress of the upload
                      }
                      return myXhr;
                  },
  
                  // DO NOT set the contentType and processData
                  // see http://stackoverflow.com/a/5976031/80353
                  contentType: false,
                  processData: false,
  
                  //success
                  success: function (json) {
                      // json is already an object thanks to cakephp code to serialize
  
                      //if POST is a success expect no errors
                      if (json.error == null &amp;&amp; json.result != null) {
                          currentUser = json.result.User;
                      // error
                      } else {
                          alert(json.error);
                      }
                  }
              });
              promises.push( request);
          }
  
          var promise = promises[0];
          for (var i = 1; i &lt; promises.length; i++) {
            promise = promise.then(promises[i]);
          }
  
          return promise.done(function () { console.log('all!')});
  </code></pre>
  
  <p>Unfortunately, I was not able to upload a lot of files before I got redirected to success page.</p>
  
  <p>I have tried various StackOverflow solutions on how to do this. So far nothing works. Please advise.</p>
  
  <p>Some code has been truncated to save space.</p>