#15 Refile Uploads with Progress Bar

Summary

Adding progress bars to your Refile uploader is easy thanks to the included javascript library from Refile. Learn how to add progress bars to your application.
rails view uploads 2:41

Summary

application.js//= require refile
_form.html.erb
    <div class="progress" id='progress-bar' style='display:none;'>
      <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%">
        <span class="sr-only" id='progress-bar-text'></span>
      </div>
    </div>

    <%= f.attachment_field :profile_image, direct: true %>
users.coffee    jQuery ->
      $(document).on "upload:start", "form", (e) ->
        $(this).find("input[type=submit]").attr "disabled", true
        $("#progress-bar").slideDown('fast')

      $(document).on "upload:progress", "form", (e) ->
        detail          = e.originalEvent.detail
        percentComplete = Math.round(detail.loaded / detail.total * 100)
        $('.progress-bar').width("#{percentComplete}%");
        $("#progress-bar-text").text("#{percentComplete}% Complete")

      $(document).on "upload:success", "form", (e) ->
        $(this).find("input[type=submit]").removeAttr "disabled"  unless $(this).find("input.uploading").length
        $("#progress-bar").slideUp('fast')

kobaltz PRO said over 2 years ago:

FYI, if anyone is having issues with the Progress Bar showing the status, you will need to change the detail to below in the progress section.


$(document).on "upload:progress", "form", (e) ->
detail= e.originalEvent.detail.progress

lbstephane said about 1 year ago:

Hi, thanks for this great video.

Any solution to refresh the image after upload ? 

Login to Comment