Refile Uploads with Progress Bar

#15 Refile Uploads with Progress Bar


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


application.js//= require refile
    <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>

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

      $(document).on "upload:progress", "form", (e) ->
        detail          = e.originalEvent.detail
        percentComplete = Math.round(detail.loaded / * 100)
        $("#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

kobaltz said 6 months 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