Rails + Amazon S3 + Jquery-Datei hochladen: Upload-Fortschrittsbalken funktioniert nicht?

Question

Hallo Ich verwende derzeit den Fortschrittsbarcode der Railscasts jquery Datei Upload-Tutorials (http://railscasts.com/episodes/381-jquery-file-upload) und es funktionierte gut, bevor Sie Amazon S3 hinzufügen. Ich verwende nur die Basisversion von Jquery-Datei hochladen ohne die Benutzeroberfläche.

Die Bar erscheint, aber es ist nur eine leere graue Leiste (obwohl die Bilder vollständig hochladen). Gibt es einen Grund dafür? Und gibt es einen anderen Weg, dies zu tun (damit es funktioniert)?

Fotos/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 + '%') 

meine komplette Code ist hier: https://github.com/EdmundMai/pholderbeta/blob/master/app/views/photos/new.html.erb

Answer 1

, wenn es helfen kann, schrieb ich ein Tutorial über diese: http://pjambet.github.com/blog/direct-upload-to-s3/, und es gibt eine Live-Demo: http://direct-upload.herokuapp.com/photos-Code auf Github gehostet wird: https://github.com/pjambet/direct-upload

Answer 2

Ryan verpasst eine Sache zu sagen, dass Sie einen Stil in Ihrer CSS-Datei hinzufügen müssen Wenn Sie auf seinen Code schauen, finden Sie folgenden Stil in seiner painting.css Datei.

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