Rails + Amazon s3 + przesłanie pliku jQuery: pasek postępu ładowania nie działa?

Question

Witam Obecnie używam kodu postępu railscasts jquery samouczek do ładowania tutoriala (http://railscasts.com/episodes/381-jquery-file-upload) i działało dobrze przed dodaniem Amazon S3. Używam tylko podstawowej wersji przesyłania plików jquery bez interfejsu użytkownika.

Pasek jest wyświetlany, ale jest to pusty szary pasek (chociaż zdjęcia są w całości przesyłane). Czy istnieje jakiś powód? Czy istnieje inny sposób, aby to zrobić (aby działał)?

zdjęcia/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 + '%') 

mój pełny kod jest tutaj: https://github.com/EdmundMai/pholderbeta/blob/master/app/views/photos/new.html.erb

Answer 1

jeśli może pomóc, pisałem tutorial na temat tego: http://pjambet.github.com/blog/direct-upload-to-s3/, a tam demo na żywo: http://direct-upload.herokuapp.com/photos kod jest hostowany na github: https://github.com/pjambet/direct-upload

Answer 2

Ryan brakowało jednej rzeczy powiedzieć, że trzeba dodać styl w pliku css jeśli spojrzysz na jego kod, znajdziesz następujący styl w jego pliku painting.css.

.upload .progress .bar { 
    background: none repeat scroll 0 0 #3EC144; 
    height: 100%; 
}