Aws S3 – store your images

Many times you need to store your images downloaded by customer in a web storage where your web application can load them from and to display. Aws offers S3 (Scalable Storage in Cloud) service for this purpose.

Create S3 bucket

Login to AWS web console click Services and type to search field S3 and then select S3 Scalable Storage in Cloud. This brings you to your S3 dashboard.


in S3 dashboard click Create bucket.

On following screen select Bucket name, Region and click Next some times to Review screen where click Create bucket.

Now you will see your bucket in the list of bucket. Click its name, then Permission tab, Block public access button and then Edit.

Uncheck Block all public access and then check everything except Block public access to buckets and objects granted through new access control lists (ACLs). Then Save and Confirm button.

Now click Bucket policy and enter policy specification by JSON below. Then click Save.

In policy specification do not forget to change the bucket name to your bucket name.

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:PutObjectAcl",
                "s3:GetObjectAcl"
            ],
            "Resource": "arn:aws:s3:::my-bucket-test999/*"
        }
    ]
}

Click Permission tab and CORS configuration button.

Insert CORS configuration and click Save.

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

Upload images from client web app

Now let’s use AWS SDK for Javascript and upload your image.

var params = {Bucket: 'bucket', Key: 'key', Body: stream}; s3.upload(params, function(err, data) { console.log(err, data); });

Details in SDK: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property

The Key item is usually the file name and the Body item also accepts a file object, an item of files array which is a set of files selected by user. In code below the files array is passed by preview function.

 <input #file type="file" accept='image/*' (change)="preview(file.files)" />

How to display images

You can display images either directly from S3 bucket via their url address or by downloading them to your app.

The upload function described above responses data from the successful upload: * Location (String) the URL of the uploaded object * ETag (String) the ETag of the uploaded object * Bucket (String) the bucket to which the object was uploaded * Key (String) the key to which the object was uploaded.

The Location string is url which can be used.

Downloading images from your S3 bucket can be done via getObject function.

 var params = {
  Bucket: "examplebucket", 
  Key: "SampleFile.png"
 };
 s3.getObject(params, function(err, data) {
   if (err) console.log(err, err.stack); // an error occurred
   else     console.log(data);           // successful response
 });

The code above gets your uploaded file back to your application.

How about uri

If you use uri encoding of images in your application, you can also store it in the bucket. Simply save uri to TXT file and upload to the S3 bucket as *.txt file. You can use the same functions upload and getObject of Aws Javascript SDK as we did above.