Froala Saving Images on Amazon-S3

amazon_signature.rb

module AmazonSignature
  extend self

  def signature
    Base64.encode64(
        OpenSSL::HMAC.digest(
          OpenSSL::Digest.new('sha1'),
          AWS_CONFIG['secret_access_key'], self.policy
        )
      ).gsub("\n", "")
  end

  def policy
    Base64.encode64(self.policy_data.to_json).gsub("\n", "")
  end

  def policy_data
    {
      expiration: 10.hours.from_now.utc.iso8601,
      conditions: [
        ["starts-with", "$key", AWS_CONFIG['key_start']],
        ["starts-with", "$x-requested-with", "xhr"],
        ["content-length-range", 0, 20.megabytes],
        ["starts-with", "$content-type", ""],
        {bucket: AWS_CONFIG['bucket']},
        {acl: AWS_CONFIG['acl']},
        {success_action_status: "201"}
      ]
    }
  end

  def data_hash
    {:signature => self.signature, :policy => self.policy, :bucket => AWS_CONFIG['bucket'], :acl => AWS_CONFIG['acl'], :key_start => AWS_CONFIG['key_start'], :access_key => AWS_CONFIG['access_key_id']}
  end
end

application.js

...
//= require froala_editor.min.js
//= require plugins/image.min.js
//= require plugins/file.min.js
...

function addEditorToPostForm(field) {
  $(field).froalaEditor({
    heightMin: '190px',
    toolbarButtons: ['bold', 'italic', '|',
            'quote', 'insertLink', 'insertImage', 'insertVideo', '|',
            'formatOL', 'formatUL', 'insertHR'],
    linkInsertButtons: ['linkBack'],
    linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove'],
    videoInsertButtons: ['videoBack', '|', 'videoByURL'],
    videoResize: false, videoMove: false,
    videoEditButtons: ['videoRemove'],
    htmlDoNotWrapTags: ['iframe', 'span'],
    placeholderText: 'Ok. Go!',
    imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|',
            'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-',
            'imageDisplay', 'imageAlt', 'imageSize'],
    imageDefaultWidth: 0,
    enter: $.FroalaEditor.ENTER_BR,
    imageUploadToS3: {
      bucket: '<%= @hash[:bucket] %>',
      region: 'us-east-1', // Change the region if it is different
      keyStart: '<%= @hash[:key_start] %>',
      callback: function (url, key) {
        // The URL and Key returned from Amazon.
        console.log (url);
        console.log (key);
      },
      params: {
        acl: '<%= @hash[:acl] %>', // ACL according to Amazon Documentation.
        AWSAccessKeyId: '<%= @hash[:access_key] %>', // Access Key from Amazon.
        policy: '<%= @hash[:policy] %>', // Policy string computed in the backend.
        signature: '<%= @hash[:signature] %>', // Signature computed in the backend.
      }
    }
  })
}

application.rb

module SampleApp
  class Application < Rails::Application
    config.autoload_paths += %W(#{config.root}/lib)
  end
ens

AWS_CONFIG.rb

AWS_CONFIG = {
    'access_key_id' => ENV['aws_access_key'],
    'secret_access_key' => ENV['aws_secret_key'],
    'bucket' => ENV['aws_bucket'],
    'acl' => 'public-read',
    'key_start' => 'uploads/'
}

CORS_Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>rails-tutorial-catalin8.c9users.io</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

posts_controller.rb

class PostsController < ApplicationController
  include AmazonSignature

  ...

  def new
    @hash = AmazonSignature::data_hash
    @post = Post.new
  end

  def create
    @hash = AmazonSignature::data_hash
    ...
  end
end