views:

40

answers:

0

I am having some trouble getting an upload progress working for my file upload.

new.html.erb

  <%= form_for  @image, (onsubmit="openProgressBar(); return true;"), :html => {          :multipart => true } do |f| %>
  <%= f.file_field :photo %>
   </p>
   div>
  <div class="actions">
  <%= f.submit %>
  </div>
  <br />
   <iframe id="uploadframe" name="uploadframe" width="0" height="0" frameborder="0"    border="0" src="about:blank"></iframe>
  <div>
  <div id="progress" style="width: 400px; border: 1px solid black">
 <div id="progressbar" 
      style="width: 1px; background-color: black; border: 1px solid white">

 </div>
</div>

upload.js

    interval = null;

  function openProgressBar() {
/* generate random progress-id */
uuid = "";
for (i = 0; i < 32; i++) {
  uuid += Math.floor(Math.random() * 16).toString(16);
}
/* patch the form-action tag to include the progress-id */
document.getElementById("image").action="/images?X-Progress-ID=" + uuid;

/* call the progress-updater every 1000ms */
interval = window.setInterval( function () {  fetch(uuid);  }, 1000 );
 }

  function fetch(uuid) {
req = new XMLHttpRequest();
req.open("GET", "/progress", 1);
req.setRequestHeader("X-Progress-ID", uuid);
req.onreadystatechange = function () {
if (req.readyState == 4) {
  if (req.status == 200) {
    /* poor-man JSON parser */
    var upload = eval(req.responseText);

    document.getElementById('tp').innerHTML = upload.state;

    /* change the width if the inner progress-bar */
    if (image.state == 'done' || image.state == 'uploading') {
      bar = document.getElementById('progressbar');
      w = 400 * image.received / image.size;
      bar.style.width = w + 'px';
    }
    /* we are done, stop the interval */
    if (image.state == 'done') {
      window.clearTimeout(interval);
    }
  }
  }
  }
  req.send(null);
 }

In my nginx.conf file I have

   upload_progress image 256k; 

   track_uploads image 30s; 

   location ^~ /progress {

  report_uploads image;
}

The file uploads fine but I don't see any activity on the progress bar.