Upload and View Files in Amazon S3 using Angular + Spring Boot

Photo by Christian Wiediger on Unsplash

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This can be used to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.

So let us now see how we could use Amazon S3 in our projects to store and retrieve files.

To start with, we will create our Angular project.

ng new project_name

Next is to create a simple html page to upload, view and delete files. For that we will move to the app.component.html page and start implementing it.

Now we need to create a service to communicate with the back-end and to send the selected file as a multipart file to the back-end.

As it is done, we need to import the service we created to the app.component.ts file and add few more methods to upload files with the help of the service, view files and also to delete files.

It is important to make sure that all the imports which are mentioned at the beginning of the component.ts files are present in the project node modules folder. If not they must be installed as below.

npm install imported_file_name

With that we have completed our front-end interface and its functionalities.

Now we need to create an Amazon Web Service(AWS) account and get the S3 service. The below link will get you to the AWS account creation page.

https://portal.aws.amazon.com/billing/signup#/start

Even though your card details will be taken you will not be charged as you will be getting a free period to try there services.. After creating the account you will be able to see the services that they provide. Under Storage Services you will be able to select ‘S3’. That would lead you to the buckets that you have. As this is a new account there will be none. So let us now create a bucket.

First you need to select the option ‘Create Bucket’.

The bucket creation process will have 4 sections. In the first section you need to give a name to your bucket and then select the region. When selecting the region it is better to select a region that is close to you. But that is not a must.

You can just skip the next section by clicking the button on your right hand side bottom of the pop-up window.

The 3rd section is important as it will set permissions to our bucket. So check the boxes as per below and click next. This setting can be changed anytime after creating the bucket.

Then the last section will show you an overall review of the bucket that you are about to create. So now you can click the option ‘Create Bucket’.

Now go back to the services and select the option ‘IAM’ under ‘Security, Identity & Compliance’.

There you will see the option ‘add user’. Select that option. In the popped up window, you need to give a user name and select access type as programmatic access. Now click ‘Next’.

Then select the option ‘Attach existing policies directly’ and type ‘S3’ in the search box. From the search results select ‘AmazonS3FullAccess’ and click next.

You can now skip the ‘Add tags section’. Then it will show a review of the user that you are about to create. You can click Next again and then you will get the ‘Access Key ID’ and the ‘Secret Access Key’. Open a notepad file and keep them copied.

We are all set to start implementing our back-end. We can create our Spring Boot project easily from the below link.

https://start.spring.io/

Then we need to add the below dependencies to our pom.xml file.

Let us add the credentials of our S3 bucket which we previously copied to a notepad file, to the application.properties file now.

It is time to create our service class to work with Amazon S3. In the service class we need to implement methods to establish a connection with the S3 bucket, to convert the multipart file to a file, to upload that file and to delete a file.

Now we need to create the controller class that would communicate with the front-end and use the service class that we created before to carry out the requests which are being directed by the front-end.

With that we have come to the end of our implementation. Now it is time to test. Try uploading files and see whether they are being saved in the bucket. Also try to view and delete files by giving the file name along with their file extensions and see whether the functionalities work properly.

Hope it is all clear and your project is working perfectly…

So you can use this amazing Amazon service when ever you need to store data in your projects.. It is really efficient and easy to implement as well..

The project source code can be viewed and downloaded from GitHub..

Cheers!! Have a pleasant day!!


Leave a Reply

Your email address will not be published. Required fields are marked *