Progress bar don't remove after file upload, jquery file upload

Question

I'm using jquery-fileupload-rails Gem for uploading the Image in my application. Here is the code:

<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 class="photo-post-img">
<%= form_for Upload.new do |f| %>
  <span class="btn btn-primary fileinput-button ml30">
    <b>+</b>
    <span class="text-orange">Add image</span>
    <%= f.file_field :upload, multiple: true, name: "upload[upload]" %>
    <%= f.hidden_field :post_id, :value => @post.upload_id %>
    <%= f.hidden_field :upload_type, :value => @post.upload_type %>
  </span>
<% end %>
<div class="img-upload-list">
  <ul id="photos_uploaded" class="thumbnails pull-left">
    <% @post.uploads.each do |upload| %>
      <li class="thumbnail" id="uploads-<%=upload.id %>">
        <%=image_tag upload.upload.url(:medium) %>
        <%= link_to "Delete", upload, :remote => true, :method => "delete" %>
      </li>
     <% end %>
  </ul>
</div>

And in .js file:

jQuery(function() {
  return $('#new_upload').fileupload({
  dataType: "script",
  add: function(e, data) {
    var file, types;
    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_upload').append(data.context);
      return data.submit();
    } else {
       return alert("" + file.name + " is not a gif, jpeg, or png image file");
    }
   },

   progress: function(e, data) {
     var progress;
     if (data.context) {
       progress = parseInt(data.loaded / data.total * 100, 10);
       return data.context.find('.bar').css('width', progress + '%');
      }
    },
   done: function (e, data) {
     $('.upload').attr('style', 'visibility: hidden');
   }
 });
});

Every thing works fine but after image upload, the progress bar does not remove. How can remove bar after upload ?

Rajeev · Accepted Answer · 2013-06-06 05:10:21Z

4

Instead of done callback add stop callback in your js file

stop: function (e, data) {
  $('.upload').hide();
},

answered Jun 6, 2013 at 5:10

Rajeev

1,1134 gold badges12 silver badges30 bronze badges

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

1 Comment

Shawn Rebelo Over a year ago

Works for onetime usage. But if you have it set to allow multiple file uploads, and say the person uploads a couple files. Does whatever it is implemented into, for instance, batch watermarking. If they go to upload more, no progress bar.

Collectives™ on Stack Overflow

Progress bar don't remove after file upload, jquery file upload

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related