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

pjam · Accepted Answer · 2012-10-25 21:36:01Z

4

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

answered Oct 25, 2012 at 21:36

pjam

6,3565 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaunak Over a year ago

Hello Pjam, I just went through your tutorial and demo, but it doesnt let me upload multiple files at once does it?

pjam Over a year ago

Hi, on my tutorial I didn't use the multiple option. But from what I can remember, just adding multiple to the file input will allow you to upload more than one file. Then you have a little more work to do to handle those files, but you should be able to do it. Let me know if you need more details

Asnad Atta · Accepted Answer · 2014-08-18 07:09:50Z

2

Ryan missed one thing to tell that you have to add a style in your css file if you look on his code you will find following style in his painting.css file.

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

answered Aug 18, 2014 at 7:09

Asnad Atta

4,0131 gold badge36 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related