Uploading File To Amazon S3 Bucket Using HTML

Learn How you can upload files to Amazon Simple Storage Service in HTML.


amazon web services - s3

In order to upload a file you need to have the following things
  1. Amazon account  Secret Key 
  2. Amazon account  Access Key
And also we need to generate the policy document using BASE_64 Encoding and also Signature.

HTML Code for S3 Upload

<html>
<head>
<title>S3 POST Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<form action="
https://YOURBUCKETNAME.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value="SUBFOLDER/${Filename}">
<input type="hidden" name="AWSAccessKeyId" value="AWSACCESSKEY">
<input type="hidden" name="acl" value="public-read">
<input type="hidden" name="success_action_redirect" value="
http://www.google.com
">
<input type="hidden" name="policy" value="POLICYDOCUMENT">
<input type="hidden" name="signature" value="GENERATEDSIGNATURE">
<input type="hidden" name="Content-Type" value="image/jpeg">
<!-- Include any additional input fields here -->

Select Your File :<input name="file" type="file"><br>
<input type="submit" value="Upload File">
</form>
</body>
</html>

Description 

  • Form Action
    • https://YOURBUCKETNAME.s3.amazonaws.com/ is the first folder of your Amazon S3 
  • Key
    • If you want to upload file under the sub folder then you can mention like SUB1/SUB2/${Filename} or if you don't want to upload file under the sub folder then you can mention /${Filename} so files will uploaded to under the main directory i.e., your bucket
  • AWSACCESSKEY
    • AccessKey which is provided during Amazon account signup
  • For POLICY DOCUMENT And For SIGNATURE
    • Visit the link http://www.jfileupload.com/products/js3upload/documentation/policygenerator.html
    • Enter your access key and secret key in the mention boxes
    • Now go to Policy Document box and paste the below coding highlighted in blue color.
    • {"expiration": "2015-01-01T00:00:00Z",
        "conditions": [ 
          {"bucket": "YOURBUCKETNAME"}, 
          ["starts-with", "$key", "SUBFOLDER/"],
          {"acl": "public-read"},
          {"success_action_redirect": "http://www.google.com"},
          ["starts-with", "$Content-Type", "image/jpeg"],
          ["content-length-range", 0, 1048576]
        ]
      }
    • I have set the expiration of this policy document to be till 2015 which means it will work till 2015 and after that it wont work.So you can set your own expiration date time .
    • Enter your bucket name and key name like you mention in HTML.
    • Finally mention the content type , In the above example i am uploading images so i mentioned image/jpeg so if you are using JPEG images then you can use the content type, otherwise you have to mention which content type that you are using.
Note : Policy document and HTML Should be same.

Popular posts from this blog

Five More Indian Languages - Google Translate

Connect To JioFi Device Without Knowing The Passwords Using WPS