Upload images from Angular app to AWS s3 bucket using FineUploader
This post is intended for web developers who are trying to implement image upload functionality.
If your website needs to allow users to upload images then it is always a good idea to upload them on s3 bucket, instead of your dedicated server. Uploading on s3 will have the following benefits:
- You can store as much data as you want and access it when you need it.
- You don’t need to worry about backups if you have stored it on S3.
- With Amazon S3 you only pay for the storage you actually use. There is no minimum fee and no setup cost.
- Amazon S3 gives you the ability to store a large amount of data with a very low cost.
To upload images on S3, We need to have AWS_ACCESS_KEY and AWS_SECRET_KEY of an aws user that has the appropriate permissions to upload images in a bucket.
To upload images on S3, We need to have AWS_ACCESS_KEY and AWS_SECRET_KEY of an aws user that has the appropriate permissions to upload images in a bucket. But there is a better way possible. We can use the Fine Uploader library which allows us to upload images directly to s3 with minimum support of back-end. This library eliminates server-side complexity and saves bandwidth.
I will quickly explain how to use this library with an angular app.
First of all, we need to create a bucket in AWS S3. By default, AWS allows cross-origin GET requests on the S3 bucket. This is enforced via an XML document in the CORS configuration. You need to change this configuration to allow POST requests on the S3 bucket.
<?xml version=”1.0" encoding=”UTF-8"?>
<CORSConfiguration xmlns=”http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Go to your Angular project’s directory and run the following command.
npm install fine-uploader --saveNow create an upload button with a unique id in your app component HTML file.
<div class=”btn” id=”upload_image”>Upload image</div>Import fine uploader in your component.ts file.
import { s3 } from ‘fine-uploader/lib/core/s3’;Now, you need to initialize the fine uploader inside the ngAfterViewInit method for your component’s life-cycle. You can set options as per your need. Read a detailed explanation about options here.
Sample file to showing fine uploader initialization and setting options :
Take a look at the options that I have set here in order to upload images to S3.
- region: AWS region in which you have created your bucket.
- request.endpoint: Your bucket URL.
- objectProperties.acl : This value corresponds to a canned ACL. I have enabled public-read to make all uploaded images publicly readable.
- signature.endpoint: The endpoint that Fine Uploader can use to send policy documents (HTML form uploads) or other strings to sign (REST requests) before sending requests off to S3. We need to create this endpoint on the server side. This endpoint or API will use AWS_ACCESS_KEY and AWS_SECRET_KEY to generate a pre-signed post URL. All we need to do is create this endpoint, and the fine uploader will automatically call this endpoint to get a signature and send the image to s3 bucket with a pre-signed signature.
Below is the code snippet is written in Django to show the sample endpoint which generates the signature.
Done. You can check running your front-end app and click on that upload button which we have created. Your selected files will be uploaded to S3 and you will see uploaded image URLs in your browser’s console.
That’s it. Thank you for reading.
References:
