jQuery File Uploadで、s3にアップロードしたい。

Question

jQurey File Uploadをつかって、AWSのs3にファイルを直接アップロードしたいです。アップロードするときに、プログレスバーも表示したいです。
Ruby on Railsつかってます。

articles_controller.rb

class ArticlesController < ApplicationController
def new
    @article = Article.new
    @course = Course.find_by_id(params[:course_id])
    s3_sts = AWS::S3.new()
    s3_bucket = s3_sts.buckets[ENV['S3_BUCKET']]

    @s3 = s3_bucket.presigned_post(
      key:"upload/#{@course.id}/articles/#{@course.articles.count + 1}/${filename}",
      success_action_redirect: "/courses/{@course.id}/article/#{@course.articles.count + 1}/info",
      acl: :private
      )
end

article.js

$(function() {
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);
    fileInput.fileupload({
      fileInput:       fileInput,
      url:             '<%= @s3.url %>',
      type:            'POST',
      autoUpload:       false,
      formData:         '<%= @s3.fields.to_json.html_safe %>',
      paramName:        'file',
      dataType:         'XML',
      replaceFileInput: false,
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e){
        submitButton.prop('disabled', true);

        progressBar.
          css('background', 'green').
          css('display', 'block').
          css('width', '0%').
          text("Loading...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Uploading done");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//<%= @s3.url.host %>/' + key;

        // create hidden field
        var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
        form.append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
  });
});

new.html.erb
<form class="directUpload">
	<input type="file">
	<input type="submit" value="UPLOAD">
</form>

このサイトを参考にしましたが、うまくいきません。

jQuery UI と jQuery File Uploadは、しっかり入ってることは、確認できました。

よろしくおねがいします。