Ruby on Rails Direct AWS S3 Upload with JqueryFileUpload

I want to build a simple File Upload system for my website (only I will be accessing and uploading) to upload my Portfolio Page. My website is on Ruby on Rails, hosted on Heroku.

So I was following the Heroku Tutorial to upload Images to S3. It uses the aws-sdk gem After following through the tutorial, when I try to upload a simple .png file, I received the following error.

Bad Request 400: Bucket POST must contain a field named 'key'.  If it is specified, please check the order of the fields.

PortfolioController

 def new
    @s3_direct_post = S3_BUCKET.presigned_post(key: "${filename}", success_action_status: 201, acl: :public_read)
    @portfolio = Portfolio.new()
  end

Checking the javascript formData value in the View:

...
fileInput.fileupload({
                formData:       '<%=@s3_direct_post.fields.to_json.html_safe %>',
                fileInput:      fileInput,
                url:            '<%=@s3_direct_post.url%>',
                type:           'POST',
                autoUpload:     true,
                paramName:      'file',
                dataType:       'XML',
                replaceFileInput: false,

...

gives:

{
"AWSAccessKeyId"=>"my-access-key",
"key"=>"${filename}",
"policy"=> "long-string",
"signature"=>"randomg-signature-string", 
"success_action_status"=>"201",
"acl"=>"public-read"
}

I've tried adding to sync my timing as shown in /config/initializers/aws.rb:

AWS.config(access_key_id:     ENV['AWS_ACCESS_KEY_ID'],
           secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'])

AWS::S3.const_set('DEFAULT_HOST', "s3-ap-southeast-1.amazonaws.com")

S3_BUCKET = AWS::S3.new.buckets[ENV['S3_BUCKET']]

After looking through Google and Stackoverflow, it seems that Jquery might be rebuilding the form data, hence messing up the order of the POST values.

Problem is, I'm relatively new to Ruby on Rails and Javascript, so I'm not sure how to go about fixing this.

Any advice is appreciated. Thanks!