aws.rb

# REFERENCE https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails


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'])

upload_to_s3.js

$(document).on('turbolinks:load', 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='progress-bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    var formData = $('form#fields-for-s3').serializeArray()
    fileInput.after(barContainer);
    fileInput.fileupload({
      fileInput:       fileInput,
      url:             form.data('url'),
      type:            'POST',
      autoUpload:       true,
      formData:         formData,
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
      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('width', '0%').
          text("Carregando...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Carregado");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//' + form.data('host') + '/' + key;

        // create hidden field
        //var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })

        $(form.data('destination-input')).val(url);
        $(form.data('destination-input')).trigger('change');

        //form.append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
  });
});

view.slim

      - @s3_direct_post = S3_BUCKET.presigned_post(key: "#{Rails.env}/uploads/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read')
      form#fields-for-s3                                                                                                      
        - @s3_direct_post.fields.map do |name, value|                                                                          
          input[ type="hidden" name="#{name}" value="#{value}"]                                                               
      form.directUpload data-url="#{@s3_direct_post.url}" data-host="#{URI.parse(@s3_direct_post.url).host}" data-destination-input="input#model_file_url"
        input[type="file"]                                                                                                    
              
      = form_for(@model)  do |f|          
        = f.input :file_url, as: :hidden
       
        = f.actions do
          = f.action :submit, :as => :button