ブラウザからS3に画像を直接アップロードする際にエラーが発生する(rails)

やりたいこと

写真投稿サービスのようなものを作っています。こちらの記事を参考にrailsでブラウザからS3画像を直接アップロードしたいのですがエラーが発生してうまくいきません。

該当ソースコードとエラー

new.html.erb

<script>

$(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_direct_post.url %>',
      type:            'POST',
      autoUpload:       true,
      formData:         <%= @s3_direct_post.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_direct_post.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");
      }
    });
  });
});

</script>

NoMethodError in Posts#new
undefined method `url' for nil:NilClass
Extracted source (around line #26):

fileInput.fileupload({
      fileInput:       fileInput,
      **url:             '<%= @s3_direct_post.url %>',**←エラー箇所
      type:            'POST',
      autoUpload:       true,
      formData:         <%= @s3_direct_post.fields.to_json.html_safe %>,

その他ソースコード

config/initializers/aws

Aws.config.update({
  region: 'ap-northeast-1',
  credentials: Aws::Credentials.new(ENV['S3_ACCESS_KEY'], ENV['S3_SECRET_KEY']),
})

S3_BUCKET = Aws::S3::Resource.new.bucket(ENV["S3_BUCKET"])

app/controllers/post_controller.rb

def new
    @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: "201", acl: 'public-read')
    @post=Post.new
    @post.images.new
end

aws-sdkのバージョンは3.0.1です。
よろしくお願いします。