Amazon S3 Direct Upload Ruby on Rails JQuery File Uploader

Question

I am having trouble uploading multiple files to Amazon S3 bucket using Ruby on Rails through the Jquery File Uploader. I have copied the demo HTML and Javascript and just made modifications to include the URL as well as the bucket signature.

However, every time I open the page, I immediately get the following error in the console: GET https://s3.amazonaws.com/bucket_name 403 (Forbidden).

When I look at the details of the response it is as follows:

 <?xml version="1.0" encoding="UTF-8"?>
 <Error><Code>AccessDenied</Code><Message>Access Denied</Message>
 <RequestId>7D97B964E747CE5E</RequestId>
 <HostId>J9TNm9/HANJfxzXyjmQ7IAWAsCY5HdFl/OKxTTRSADLpzZ5AVa1nTfC2DWZlg+ppOolGD5fdja0=
 </HostId></Error>

I have already tried doing the following of modifying the bucket policy and have even given full access and that didn't work. I also tried the Heroku S3 Direct Upload Tutorial before this so I know my AWS Keys are working. What else could I be missing?

Controller

def new
   @photo = Photo.new
   @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/photos/#{SecureRandom.uuid}/${filename}", success_action_status: 201, acl: :public_read)
end

HTML

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
    <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="fa fa-plus"></i>
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="fa fa-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="fa fa-ban"></i>
            <span>Cancel upload</span>
        </button>
        <button type="button" class="btn btn-danger delete">
            <i class="fa fa-trash-o"></i>
            <span>Delete</span>
        </button>
        <input type="checkbox" class="toggle">
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>
    <!-- The global progress state -->
    <div class="col-lg-5 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody>  
</table>
</form>

Javascript

$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: '<%= @s3_direct_post.url %>',
    formData: <%= @s3_direct_post.fields.to_json.html_safe %>
});

// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: $('#fileupload').fileupload('option', 'url'),
    dataType: 'json',
    context: $('#fileupload')[0]
}).always(function () {
    $(this).removeClass('fileupload-processing');
}).done(function (result) {
    $(this).fileupload('option', 'done')
        .call(this, $.Event('done'), {result: result});
});
});