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.