Skip to main content

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

Connect To JioFi Device Without Knowing The Passwords Using WPS

If someone in your home or your friends are using Jiofi device and he/she is not sharing the password with you then i am going to share you a simple trick, so you can easily connect to the jiofi router without the need of password and start using the unlimited internet.

This trick can be achieved using the WPS technology (Wi-Fi Protected Setup; originally, Wi-Fi Simple Config) is a network security standard to create a secure wireless home network.

Follow the steps to get the internet for free using the "WPS Push Button Method"
Go to your Wifi Settings in your smartphone device like Android Turn on your Wifi Click the option button and select the  "WPS push button" and you will be seeing the popup window like this below picture.
Now take your JioFi Device and in the right side, you will seeing the WPS button  Hold the WPS button for few moments and see the Jiofi display, so the wifi icon will blink. After few seconds, your smartphone device would have shared the Wifi…

Five More Indian Languages - Google Translate

Google Translate add 5 more indian language translation like Bengali, Gujarati, Kannada, Tamil and Telugu.Till Today Google Translation supports 63 languages. As a indian bloggger its a happy to announce that all indic languages sites and blogs become internationalized one. All indic bloggers and sites owners have to attach the google translate widgets to their sites so that the internationalized reader can realize the value of your blog and may be a chance of becoming the readers.



How to Add The Google Translate Widgets on Blog or Sites

Just Add the Below code to internationalized your blog or site

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

If you want to customize the Goog…

Samsung Android 6.0 Marshmallow Supported Devices

Android Marshmallow is finally available. List of Samsung Device that can be upgraded to Android 6.0 Marshmallow.


Samsung Galaxy S6 edge+ Samsung Galaxy Note5Samsung Galaxy A8Samsung Galaxy A7Samsung Galaxy S6 edgeSamsung Galaxy S6Samsung Galaxy Note 4Samsung Galaxy AlphaSamsung Galaxy S5