Amazon Web Service Simple Storage Service(S3) provides users to store unlimited data through online who have AWS account. We can upload a file directly by log-in to AWS account using credentials. But here we are trying to create HTML page in our own system that allows to upload files into AWS S3 bucket using a web browser without log-in to AWS account.
I am going to give detailed explanation and step by step process to build HTML page. To execute the following HTML page, first you need to have your own AWS account. Create your own bucket in S3 to store the file which we upload from this HTML.
<meta> tag is used to specify the page description and provides
meta data about HTML. Meta data will not be displayed on the page.
2 buttons, one to choose a file and another one to upload.
a form tag, to redirect the page to S3 bucket after button click. Write an action attribute in the
form, to which URL the file must be uploaded, after clicking on the
the above image, in action attribute copy your AWS S3 bucket name as shown in figure and
rest of the link is same as it is.
the key represents the name of a file which we are going to upload.
gets the filename of the uploaded file dynamically which we want to
upload to S3.
there are folders or directories in the bucket, we can choose in
which bucket we need to upload by changing the value
Access key ID and Secret access key both are our credentials to
authenticate with AWS. These keys are unique for every user. AWS does
not allow to retrieve these keys once created. If you lose your keys,
you can create new keys rather than retrieval.
S3 supports some predefined permissions. These are called as Access
Control Policies (ACL).
are some ACLs which we use regularly.
owner gets full rights. No other users has access rights. It applies
to both Bucket and Object.
gets full rights. Remaining all users gets access to read only. It
applies to both Bucket and Object.
gets full rights. Remaining all users gets both read and write
access. It applies to both Bucket and Object. This is not generally
recommended because of security issues.
Add the link where to redirect after uploading a file successfully, to show success message.
uploading to S3 bucket, AWS S3 has a policy document. That policy
document should be encoded in base64 encryption method.
generation of base64 encoded value, we have solution with the help of
python code. Before that first we need to update of policy document
and save it as “policy.txt” in our system.
details which we provide on policy document should match with the
details which we provide in our HTML page. All
the attribute keys in policy document should match with our HTML
is the python code to encrypt the policy document to base64
= open("policy.txt", "rb")
output will be in the format like
need to copy just the code between the single quotes.
output from python code is the input for our policy attribute. Paste
the encrypted code here.
as above, we need some execution to calculate the signature value.
will provide you the python code regarding calculation of signature
Paste the output of above python program in the signature attribute value, as shown below.
The content type is nothing but which type of file we are going to upload. We can restrict users by this attribute from uploading a selected file type. If the content type is like Images/jpeg , then we have to upload only .jpeg image files. The user don’t know what type of file he uploads then for any type of file upload we use “application/octet-stream”.
“uploadfromhtml” is my bucket name, and I just checked for files in the bucket and it is empty now.
Run your HTML code from your browser.
Choose a file from your system and here I am selecting a text file called IMP TASK.
Press upload button to upload file into S3 bucket.