title: Progressbar for file uploads in chrome
body: <p>I have a webpage which tracks the progress of a file upload. This is the html source:</p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="hidden" id="id" name="UPLOAD_IDENTIFIER" value="4dc6f7819200e"&gt;
      &lt;input type="file" name="image"&gt;
      &lt;input type="submit" value="Upload file"&gt;
  &lt;/form&gt;
  &lt;div id="progress"&gt;&lt;/div&gt;
  &lt;iframe id="upload-frame" name="upload-frame"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>And this is my javascript (I use jQuery):</p>
  
  <pre><code>var pbar = $("#progress");
  var started = false;
  
  $(function() {
      $("form").submit(function() {
          pbar.show().progressbar();
  
          $("#upload-frame").load(function() {
              started = true;
          }
  
          setTimeout(function() {
              updateProgress($("#id").val());
          }, 500);
      });
  });
  
  function updateProgress(id) {
      $.get("my/url/here?id=" + id, function(progress) {
          if (null === progress) {
              updateProgress(id);
          }
  
          if (progress&lt;100 || !started) {
              started = progress &lt; 100;
              updateProgress(id);
          }
  
          started &amp;&amp; pbar.progressbar('value', progress);
      }
  };
  </code></pre>
  
  <p>I leave the server side code out, because this is the strange thing: Firefox and IE work normally. Only the webkit browsers (Chrome, Chromium, Safari) show the start of the progressbar, but do not update them. Why is that? Any thoughts?</p>