Where do the S3 Policy and Secret Key go? - ruby-on-rails

Question

I'm new to AWS/S3 and following this tutorial from Amazon.
It's not working, and I'm wondering if it's due to the policy section.
Where does the policy go? For what it's worth, the form is in a React component. I tried putting the one below into the S3 policy in my AWS console, but it didn't like it.
I see the Access Key goes in the form. Where does the Secret key go? (Rails+React app)
Thanks for any guidance.
Here's the policy:
{ "expiration": "2007-12-01T12:00:00.000Z",
"conditions": [
{"bucket": "johnsmith"},
["starts-with", "$key", "user/eric/"],
{"acl": "public-read"},
{"success_action_redirect": "http://johnsmith.s3.amazonaws.com/successful_upload.html"},
["starts-with", "$Content-Type", "image/"],
{"x-amz-meta-uuid": "14365123651274"},
["starts-with", "$x-amz-meta-tag", ""]
]
}
And the form:
<form action="http://johnsmith.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
Key to upload: <input type="input" name="key" value="user/eric/" /><br />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="success_action_redirect" value="http://johnsmith.s3.amazonaws.com/successful_upload.html" />
Content-Type: <input type="input" name="Content-Type" value="image/jpeg" /><br />
<input type="hidden" name="x-amz-meta-uuid" value="14365123651274" />
Tags for File: <input type="input" name="x-amz-meta-tag" value="" /><br />
<input type="hidden" name="AWSAccessKeyId" value="AKIAIOSFODNN7EXAMPLE" />
<input type="hidden" name="Policy" value="POLICY" />
<input type="hidden" name="Signature" value="SIGNATURE" />
File: <input type="file" name="file" /> <br />
<!-- The elements after this will be ignored -->
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
...

Answer 1

The Policy value should be a base64-encoded version of your policy.
The Signature should be a hash based on the Policy and the Secret Key.
For example, this Python code (sorry, I don't have equivalent Ruby code handy) will output the two values for you:
#!/usr/bin/python
import base64
import hmac, hashlib
policy_document = '{ "expiration": "2007-12-01T12:00:00.000Z",
"conditions": [
{"bucket": "johnsmith"},
["starts-with", "$key", "user/eric/"],
{"acl": "public-read"},
{"success_action_redirect": "http://johnsmith.s3.amazonaws.com/successful_upload.html"},
["starts-with", "$Content-Type", "image/"],
{"x-amz-meta-uuid": "14365123651274"},
["starts-with", "$x-amz-meta-tag", ""]
]
}'
AWS_SECRET_ACCESS_KEY = "<SECRET-KEY>"
policy = base64.b64encode(policy_document)
signature = base64.b64encode(hmac.new(AWS_SECRET_ACCESS_KEY, policy, hashlib.sha1).digest())
print policy
print
print signature

Answer 2

Everything in your form looks alright, except POLICY & SIGNATURE:
Policy will be encoded as Base64 which includes some basic info about bucket, expiration, acl, etc,..
Signature will be encoded as Base64 as well which includes secret key, and above policy
Here is my example which describes how to generate POLICY & SIGNATURE:
class S3Upload
attr_reader :policy_document, :signature
def initialize
#policy_document = generate_policy_document
#signature = generate_signature
end
private
def generate_policy_document
Base64.encode64(
{
expiration: 1.day.from_now.utc.strftime('%Y-%m-%dT%H:%M:%S.000Z'),
conditions: [
{ bucket: YOUR_BUCKET },
{ acl: 'public-read' },
["starts-with", "$key", ""],
{ success_action_status: '201' },
["starts-with","$content-type", "image/"]
]
}.to_json
).gsub(/\n|\r/, '')
end
def generate_signature
Base64.encode64(
OpenSSL::HMAC.digest(
OpenSSL::Digest::Digest.new('sha1'),
YOUR_AWS_SECRET_ACCESS_KEY,
policy_document
)
).gsub(/\n/, '')
end
end
You can use this class to export policy & signature, then include to your form.
We don't include secret key to form directly, we use it to generate signature as my example above