title: Async post - handling a reply
body: <p>I am trying to upload a list of images. I have the images stored in an array (called images).</p>
  
  <p>I have the previews displayed on the screen. </p>
  
  <p>What I want to do is upload them sequentially, and as they complete their upload, I want to set a flag. When this flag is set (thanks to the power of Knockout), the image disappears from the list.</p>
  
  <p>However, I think due to the async nature of the post command .. I'm not achieving the desired results.</p>
  
  <p>Below is what I am trying to do:</p>
  
  <pre><code>for(var i = 0; i &lt; self.images().length; i++) {
    var photo = self.images()[i];
    var thisItem = photo;
    var object = JSON.stringify({
      Image: thisItem.Image,
      AlbumID: albumId,
      Filesize: thisItem.Filesize,
      Filetype: thisItem.Filetype,
      Description: thisItem.Description,
      UniqueID: thisItem.UniqueID
    });
    var uri = "/api/Photo/Upload";
    $.post({
      url: uri,
      contentType: "application/json"
    }, object).done(function(data) {
      if(data.IsSuccess) {
        photo.Status(1);
      }
    }).fail(function() {
      // Handle here
    }).always(function() {
      remainingImages = remainingImages - 1;
      if(remainingImages == 0) self.isUploading(false);
    });
  }
  self.isUploading(false);
  </code></pre>
  
  <p>But I think what's happening is that the for loop ends before all the posts have received a reply. Because online one image is removed.</p>
  
  <p>I tried with a <code>async: false</code> ajax post, but that locked up the screen and then they all disappeared.</p>
  
  <p>I thought the 'done' method would only execute once the post is completed, but I think the whole method just ends once the post commands have been sent, and then I never get the <code>done</code>.</p>
  
  <p>How can I achieve what I'm trying to do... Set each image's status once the post gets a reply?</p>