Browser Based File Upload on AWS S3 using POST Request

This is my HTML POST Form.

<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  </head>
  <body>

  <form action="http://sigv4examplebucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
    Key to upload: 
    <input type="input"  name="key" value="user/user1/${filename}" /><br />
    <input type="hidden" name="acl" value="public-read" />
    <input type="hidden" name="success_action_redirect" value="http://sigv4examplebucket.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" /> 
    <input type="hidden" name="x-amz-server-side-encryption" value="AES256" /> 
    <input type="text"   name="X-Amz-Credential" value="AKIAIOSFODNN7EXAMPLE/20151229/us-east-1/s3/aws4_request" />
    <input type="text"   name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />
    <input type="text"   name="X-Amz-Date" value="20151229T000000Z" />

    Tags for File: 
    <input type="input"  name="x-amz-meta-tag" value="" /><br />
    <input type="hidden" name="Policy" value='<Base64-encoded policy string>' />
    <input type="hidden" name="X-Amz-Signature" value="<signature-value>" />
    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>

</html>

I got this from the AWS S3 Docs shown below.

https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html

From AWS Console I have gotten my security credentials as shown below.

enter image description here

I am aware that I need to set values for "Policy" and "X-Amz-Signature" but I am not sure as to how to do that.

In the docs they have mentioned that I need to StringToSign and get the Policy/Signature but I am not sure how to do that.

enter image description here

Can someone help me as to how to generate Policy and Signature for my HTML FORM ?

Answers 1

  • You will have to calculate the signature from backend. Follow these details Calculating a Signature to implement at your own.

    That would be something like this:

    $kDate = hash_hmac('sha256', $short_date, 'AWS4' . $secret_key, true);
    $kRegion = hash_hmac('sha256', $region, $kDate, true);
    $kService = hash_hmac('sha256', "s3", $kRegion, true);
    $kSigning = hash_hmac('sha256', "aws4_request", $kService, true);
    $signature = hash_hmac('sha256', base64_encode($policy), $kSigning);
    

    Or you can use any of the AWS SDKs of your choice.

    For example using PHP SDK you would implement:

    Aws\Signature\S3SignatureV4
    

Related Articles