Rails - Uploading large files directly to S3 with Jquery File Upload (hosted on Heroku )

I'm using Heroku, which means I have to upload multiple large files to S3 directly.. I'm using Rails 3.2.11, and Ruby 1.9.3. I do not wish to use carrierwave or paperclip gems, or really change much at this point - I just need to get this what I have working.

Before trying to move to S3, if I ran my app locally, I could upload multiple large files to the local file system. When I ran it on Heroku, small files upload but large ones failed. Hence the switch to S3..

I tried several tweaks, and also this link below, but it's just too much of a change to what I have that already working with the local server's file system (and Heroku as well, but Heroku just can't handle large files ..)

Tried: http://ift.tt/1rlOGxv

I've tried some of the other examples here on Stack Overflow but they are too much of a change for what works locally, and well, I don't grasp everything they are doing.

Now, what happens when I do try to upload images?

It's as if the file upload works - the preview images are successfully created, but nothing is ever uploaded to Amazon s3, and I don't receive any kind of error messages (like s3 authentication failure or anything.. nothing)

What do I need to change in order to get the files over to my s3 storage, and what can I write out to console to detect problems, if any, connecting to my s3?

My form:

        <%= form_for @status  do |f| %>

        {A FEW HTML FIELDS USED FOR A DESCRIPTION OF THE FILES - NOT IMPORTANT FOR THE QUESTION}

        File:<input id="fileupload"  multiple="multiple"  name="image" 
            type="file"  data-form-data = <%= @s3_direct_post.fields%> 
            data-url= <%= @s3_direct_post.url %> 
            data-host =<%=URI.parse(@s3_direct_post.url).host%> >   
        <%= link_to 'submit', "#", :id=>'submit' , :remote=>true%>

        <% end %>

My jquery is:

....
  $('#fileupload').fileupload({
      formData: {
                 batch: createUUID(),
                  authenticity_token:$('meta[name="csrf-token"]').attr('content')
                    },
      dataType: 'json',
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
              maxFileSize: 5000000, // 5 MB
              previewMaxWidth: 400,
              previewMaxHeight: 400,
              previewCrop: true,
      add: function (e, data) {

      tmpImg.src = URL.createObjectURL(data.files[0]) ; // create image preview 
      $('#'+ fn + '_inner' ).append(tmpImg);

    ...

My controller:

def index
#it's in the index just to simplify getting it working 

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

end

The element that is generated for the form is (via Inspect Element):

        <input id="fileupload" multiple="multiple" name="image" 
    data-form-data="{&quot;key&quot;=>&quot;uploads/34a64607-8d1b-4704-806b-159ecc47745e/${filename}&quot;," &quot;success_action_status&quot;="
    >&quot;201&quot;," &quot;acl&quot;=">&quot;public-read&quot;," &quot;policy&quot;=">&quot;[encryped stuff - no need to post]&quot;,"
     &quot;x-amz-credential&quot;=">&quot;
[AWS access key]/[some number]/us-east-1/s3/aws4_request&quot;
," &quot;x-amz-algorithm&quot;=">&quot;AWS4-HMAC-SHA256&quot;
," &quot;x-amz-date&quot;=">&quot;20150924T234656Z&quot;
," &quot;x-amz-signature&quot;=">&quot;[some encrypted stuff]&quot;}"
data-url="http://ift.tt/1gSMJ8C" data-host="nunyabizness.s3.amazonaws.com" type="file">

Help!