#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

Resources

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