ruby-on-rails - jquery fileuploadを使用して個々のアップロードをキャンセルするには?

Question

複数の画像ファイルをアップロードするために、 jquery-fileupload-rails gemを介して Rails 3.2 アプリでblueimp jquery-file-uploadを使用しています。

アップロード テンプレート内に「キャンセル」ボタンを表示しています。これらのボタンは、それぞれのファイルのアップロードを正常にキャンセルします。ただし、それらはページの再読み込みも行います。その際、他のすべてのファイルの同時アップロードがキャンセルされます (そして、ユーザー エクスペリエンスが低下します)。

私の JavaScript の知識は限られており、ドキュメントに苦労しています。jquery fileupload を使用して複数のファイルをアップロードするときに、単一のアップロードにキャンセル ボタンを実装する正しい方法は何ですか。

    #Coffeescript

    jQuery ->
      if $("#new_asset").length
        $("#new_asset").fileupload 
          dataType: "script"
          add: (e, data) ->
            types = /(\.|\/)(jpe?g|png)$/i
            file = data.files[0]
            if types.test(file.type) || types.test(file.name)
              node = data.context = $(tmpl("template-upload", file))
              $('#progress-container').append(data.context)
              jqXHR = data.submit()
              node.find(".cancel").click (e) ->
                e.preventDefault()
                jqXHR.abort()
            else
              alert("#{file.name} is not a jpeg or png image file")
          progress: (e, data) ->
            if data.context
              progress = parseInt(data.loaded / data.total * 100, 10)
              data.context.find('.bar').css('width', progress + '%')
          stop: (e, data) ->
            $('.upload').hide()

# view 
<script id="template-upload" type="text/x-tmpl">  
  <tr class="upload">
    <td class="preview-cell">{%=o.preview%}</td>
    <td class="name-cell">{%=o.name%}</td>
    <td class="progress-cell"><div class="progress"><div class="bar" style="width: 0%;"></div></div></td>
    <td class="cancel-cell"><div class="cancel"><button class="btn info" remote="true"><i class="icon-trash"></i></button></div></td>
  </tr>
</script>

#application.js
    //= require jquery-fileupload