aws.rb

Aws.config.update({
  region: ENV['AWS_REGION'],
  credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'], ENV['AWS_SECRET_ACCESS_KEY']),
})

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

controller.rb

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


output:
foo_1638 
Object {key "foo", success_action_status "201", acl "public-read", poli_ "", x-amz-credential: ""}
acl "public-read"
key "foo.stuff"
policy "stuff policy"
success_action_status "201"
x-amz-algorithm "stuff AWS4"
x-amz-credential "stuff aws4_request"
x-amz-date "201708 stuff"
x-amz-signature "stuff"

cors.rb

  Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*',
            headers: :any,
            methods: [:get, :post, :delete, :put],
            max_age: 15
      end

error.text

XMLHttpRequest cannot load https://foo-dev.s3-us-west-2.amazonaws.com/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foo.lvh.me:3000' is therefore not allowed access.

form.html.erb

<%= form_for( foo, remote: true, data_id:  foo.id,
              data: { 
                    'form' => (@s3_direct_post.fields),
                    'url' => @s3_direct_post.url,
                    'host' => URI.parse(@s3_direct_post.url).host 
                    }
             ) do |f| %>
  <%= f.file_field :photo %>
  <%= f.submit %>
<% end %>

js

$(document).on('submit', ".foo", function( e ) {
    var upload = $(this).children('input[type=file]')
        e.preventDefault();
     var loader =  $(this).parent("div.field").find("div.load-ajax");
     console.log(new FormData($(this).data('form')));
    $.ajax( {
        url:          $(this).data('url'),
        type:         'POST',
        data:         new FormData($(this).data('form')),
        paramName:    'file',
        dataType:     'XML',
        processData:  false,
        contentType: 'binary/octet-stream',
        beforeSend: function() {
        // setting a timeout
        loader.toggleClass('hide').fadeIn();
        },
        success: function(data){
          loader.toggleClass('hide').fadeOut();
          upload.replaceWith('<input hide_label="true" title="Adjuntar imagen" class="btn btn-block btn-primary" type="file" name="inspection_component[photo]" id="inspection_component_photo" style="left: -360px; top: 9px;">')
        },
        error: function (response) {
           //Handle error
         loader.toggleClass('hide').fadeOut();
          alert("Error, Ha habido un problema trata de nuevo")
        }
     })
});