Upload files to AWS S3 using Java, Spring Boot, and Angular

In this post, I have explained how to securely upload files(Images) to AWS S3 using Spring boot and Angular. This application is secured using AWS Cognito.

Even though I'm going to explain how to secure the application using AWS Cognito, Below blog posts contain more details. Please check those too.

1. Use Spring Resource Server with AWS Cognito
2. Secure APIs and Access AWS Resources with Angular and Cognito

Securing the Application

In order to secure your Spring boot application, we can use the Spring boot oauth2 resource server. To use the resource server with AWS Cognito, you have to configure the application by putting spring.security.oauth2.resourceserver.jwt.issuer-uri and spring.security.oauth2.resourceserver.jwt.jwk-set-uri in the application.properties file.

To integrate the secured Spring boot application with the Angular application, we need to configure the Angular application by including a configuration file which contains the Cognito user pool and identity pool values. It looks something like this,

const awsmobile = {

    "aws_project_region": "ap-southeast-1",

    "Auth": {

        "identityPoolId": "ap-southeast-1:xxxxxxxxxxxxxxxx",

        "region": "ap-southeast-1",

        "userPoolId": "ap-southeast-xxxxxxxxxxx",

        "userPoolWebClientId": "xxxxxxxxxxxxxxxxxxxxxx"

    }

};

export default awsmobile;

That is how we can secure both back-end and front-end using AWS Cognito.

Uploading file to S3

In this program, I have used Spring @RestController, @RequestParam, and MultipartFile class to get an image file from a POST request that is sent by the Angular client application. I have used @ValidateImg custom annotation to validate the image dimension and it can be utilized to put more validations if required. The size of the file can be validated using the spring.servlet.multipart.max-file-size property in Spring boot.

To upload the file to S3, I have used the AmazonS3 client. The method that uploads the file to S3 is blocked until the upload is complete and once completed Angular application will retrieve the URL of the uploaded image. The method is being blocked by waitForCompletion() method in the com.amazonaws.services.s3.transfer.internal.AbstractTransfer class.

Integrating the Angular Application

Angular application is responsible for getting the image from the user and sending the request with the image and the Bearer token to the Spring boot Application.

I have used (change) binding to get the file from the event. Then the file is sent to the back-end using an Angular service that uses Angular HttpClient. The token is included in the header using Angular HttpHeaders.

I have uploaded the codes of Angular application and Spring boot application to Github.

References

• https://docs.amazonaws.cn/en_us/sdk-for-java/v1/developer-guide/examples-s3-transfermanager.html#transfermanager-upload-file
• https://spring.io/guides/gs/uploading-files/
• https://docs.amplify.aws/start/q/integration/angular

Background Photo by Anni Denkova on Unsplash