Refile Uploads with Progress Bar

#15 Refile Uploads with Progress Bar
8/23/2015

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.
2
rails view uploads 2:41 min

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')

635114?v=3&s=64
kobaltz said about 1 year 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

Login to Comment