Search code examples
jqueryruby-on-railscarrierwavesidekiq

how to reload page after uploading images


I use gem 'jquery-fileupload-rails' and 'carrierwave_backgrounder' gem with sidekiq. How to add reload the page after download is complete?

The problem is that the download is in the background and the page is reloaded immediately, not when the images loaded

fileupload.js

  $(function () {
      $('#new_photo').fileupload({
          acceptFileTypes: '/(\.|\/)(gif|jpe?g|png)$/i',
          dataType: 'html',
          add: function (e, data) {
              data.context = $('#loading').css({display:"block"}).appendTo('#photos');
              data.submit();
          },
          done: function (e, data) {
              data.context.text('Upload finished.');
              location.reload();
          }
      });
  });

image_upload.html.erb

  <div class="upload" id="new_photo">
    <%= form_for([@project, current_user.photos.new]) do |f| %>
      <%= file_field_tag :image, multiple: true, name: "photo[image]" %>
      <%= link_to 'Save', @project, :class => 'btn btn-success' %>
    <% end %>
    <div id="loading">
      <h4>Loading</h4>
    </div>
  </div>
  <div class="image-upload">
    <% @project.photos.each do |photo| %>
      <%= image_tag photo.image_url.to_s %>
      <p><%= link_to "Delete", project_photo_path(@project, photo), :method => :delete, :class => 'btn' %></p>
    <% end %>
  </div>

Solution

  • from the jquery fileuploader documentation on callbacks, you can bind a success event that will be triggered after upload finishes.

    jqXHR = data.submit()
      .success(function() { window.location.reload() })