Rails + Amazon s3 + jquery file upload : upload progress bar not working?

Question

Hi I am currently using the railscasts jquery file upload tutorial's progress bar code (http://railscasts.com/episodes/381-jquery-file-upload) and it was working fine before adding Amazon S3. I'm using only the basic version of jquery file upload without the UI.

The bar shows up but it's just an empty grey bar (though the pics upload completely). Is there a reason behind this? And is there another way to do this (so that it works)?

photos/new.html.erb

<div class="clearfix">

<div class="uploadreminder">
    Upload multiple pictures at once or drag them directly to the browser!
</div>
<%= form_for([@user, @album, @photo], :html => { :multipart => true }) do |f| %>

<%= f.file_field :avatar, multiple: true, name: "photo[avatar]" %>

<% end %>

<div class="finisheduploading">
    <%= link_to "Back to album", user_album_path(@user, @album) %>
</div>



<div id="pics">
    <%= render :partial => "photo", :collection => @photos %>
</div>


    #this is the part that is supposed to make the progress bar
<script id="template-upload" type="text/x-tmpl">
<div class="upload">
  {%=o.name%}
  <div class="progress"><div class="bar" style="width: 0%"></div></div>
</div>
</script>
</div>

application.js

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require 'js/bootstrap.js'
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require_tree .

$(document).ready(function() {

  $("a.fancybox").fancybox();
  $("a.fancybox").attr('rel', 'gallery').fancybox();


});

photos.js.coffee

jQuery ->
$('#new_photo').fileupload
  dataType: "script"
  add: (e, data) ->
    types = /(\.|\/)(gif|jpe?g|png)$/i
    file = data.files[0]
    if types.test(file.type) || types.test(file.name)
      data.context = $(tmpl("template-upload", file))
      $('#new_photo').append(data.context)
      data.submit()
    else
      alert("#{file.name} is not a gif, jpeg, or png image file")
  progress: (e, data) ->
    if data.context
      progress = parseInt(data.loaded / data.total * 100, 10)
      data.context.find('.bar').css('width', progress + '%')

my complete code is here: https://github.com/EdmundMai/pholderbeta/blob/master/app/views/photos/new.html.erb

Answer 1

if it can help, I wrote a tutorial about that : http://pjambet.github.com/blog/direct-upload-to-s3/ , and there's a live demo : http://direct-upload.herokuapp.com/photos Code is hosted on github : https://github.com/pjambet/direct-upload