Upload Html to S3 Bucket Not Set as Html

Introduction
1. Source code
2. Insert right admission data to the bucket.
3. Let'south test information technology in the browser
4. Let'south install a CORS policy for our saucepan
5. Last testing
Conclusion
Useful links

Introduction

In this commodity, we will learn how to create a simple HTML page with a form for uploading files into the object storage s3.

For the solution of this detail task will be used javascript aws-sdk library and s3cmd tool.

Source lawmaking

Let's createindex.htmlwith the following content:

<!DOCTYPE html> <html> <head>     <title>AWS S3 File Upload</title>     <script src="https://sdk.amazonaws.com/js/aws-sdk-ii.1.12.min.js"></script> </head> <trunk>     <input type="file" id="file-chooser" />     <button id="upload-button">Upload to S3</button>     <div id="results"></div>    <script type="text/javascript"> const ENDPOINT_URL = "https://s3.pilw.io" const ACCESS_KEY_ID = "ENTER ACCESS KEY ID HERE" const ACCESS_KEY_SECRET = "ENTER Access Fundamental Secret" const BUCKET_NAME = "ENTER Saucepan NAME Hither"   var saucepan = new AWS.S3({     accessKeyId: ACCESS_KEY_ID,     secretAccessKey: ACCESS_KEY_SECRET,     endpoint: new AWS.Endpoint(ENDPOINT_URL),     params: {         Bucket: BUCKET_NAME     } })   var fileChooser = document.getElementById('file-chooser') var button = document.getElementById('upload-push button') var results = document.getElementById('results')   push.addEventListener('click', function() {     var file = fileChooser.files[0]     results.innerHTML = ''     if (!file) {         results.innerHTML = 'Nothing to upload.'         render     }     var params = {         Fundamental: 'demo/' + file.name,         ContentType: file.type,         Body: file,         ACL: 'public-read'     }     saucepan.putObject(params, office(err, data) {         if (err) {             results.innerHTML = 'Mistake: ' + err;             return          }          listObjs()     }) }, false)   office listObjs() {     bucket.listObjects({Prefix: 'demo'}, function(err, data) {         if (err) {             results.innerHTML = 'Error: ' + err;             return         }         var objKeys = "";         data.Contents.forEach(office(obj) {             objKeys += obj.Primal + "<br>"         });         results.innerHTML = objKeys     }) } </script> </torso> </html>

Insert correct access information to the bucket.

In this step we need to prepare right values for the post-obit constants:

- ACCESS_KEY_ID (xiv. line of the source code)

- ACCESS_KEY_SECRET (fifteen. line of the source lawmaking)

- BUCKET_NAME (16. Line of the source lawmaking)

You can also find values ofACCESS_KEY_IDandACCESS_KEY_SECRETin the information most the bucket in the storage control panel. If you lot don't take a bucket, we suggest you lot familiarize yourself with this manual: how to create a bucket.

Let's test it in the browser

Open alphabetize.html in a browser. In the process of testing turns out that file uploading is not working: error Cantankerous-origin request blocked. In the process of testing turns out that file uploading is not working: faultCantankerous-origin asking blocked.

Let'southward install a CORS policy for our bucket

To set theCross-Origin Asking Blockederror we need to prepare specialXMLfilerules.xml,where nosotros are going to describe such parameters every bit AllowedOrigin, AllowedMethod, AllowedHeader. In therules.xmlfile will exist describedCORSpolicy for our bucket. This detail policy is setting upwards for each bucket individually. To apply a prepare of rules for the saucepan, we should employ the s3cmd command line or the analog. Let'due south create a file rules.xmlwith the following content:

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <ID>Let everything</ID> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>Become</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> <MaxAgeSeconds>30</MaxAgeSeconds> </CORSRule> </CORSConfiguration>

IMPORTANT! This configuration cannot be considered condom. It is not recommended to apply this configuration in production. It is possible to use it only every bit a demonstration.

Let's utilise this policy to our saucepan using the s3cmd tool.

$                      s3cmd -c s3test.cfg setcors rules.xml s3://corsexample

In this case, "corsexample" is the name of our bucket, rules.xml is the file with cors policies, and s3test.cfg is the file of the configuration of s3cmd tool.

Concluding testing

After applying CORS parameters, files uploaded successfully.

If there are any reasons to delete the CORS configuration for the bucket, you lot can run the command:

$                      s3cmd -c s3test.cfg delcors s3://corsexample

Conclusion

As the example of this article, we can relate to the interaction of the frontend with s3 storage.

Every bit we remember from theprevious article, s3 allows us to keep and serve statics. It also tin can be hosting for our website.

We can also adapt this particular code for working with a backend. Nosotros will talk about it in ourside by side commodity.

As a event, web app integration with s3 storage is non a big bargain.

bennettclictithe75.blogspot.com

Source: https://pilvio.com/en/2021/01/21/uploading-files-from-html-page-to-an-s3-bucket/

Upload Html to S3 Bucket Not Set as Html

Table of contents

Introduction

Source lawmaking

Insert correct access information to the bucket.

Let's test it in the browser

Let'southward install a CORS policy for our bucket

IMPORTANT! This configuration cannot be considered condom. It is not recommended to apply this configuration in production. It is possible to use it only every bit a demonstration.

Concluding testing

Conclusion

0 Response to "Upload Html to S3 Bucket Not Set as Html"

Postar um comentário

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel