Upload files to AWS S3 Bucket using Spring Boot and AJAX

Follow below steps to perform this –

Step 1 – Need to add aws-java-sdk maven dependency in pom.xml file

<dependency>
     <groupId>com.amazonaws</groupId>
     <artifactId>aws-java-sdk</artifactId>
     <version>1.11.438</version>
</dependency>

Step 2 – Need to add below properties in ConstantUtils.java file

public static final String END_POINT_URL = "https://s3.us-east-1.amazonaws.com";
public static final String ACCESS_KEY = "AKIAJGDFBUUJF3LAQUWQ";
public static final String SECRET_KEY = "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";
public static final String BUCKET_NAME = "almighty-user-images";

Step 3 – Add below code in controller class

@Autowired
private AmazonService amazonService;

@PostMapping("/upload")
public @ResponseBody String fileUpload(@RequestPart(value="file") MultipartFile multipartFile, @RequestParam(value="editUserId") Long editUserId) {
     return amazonService.uploadFile(multipartFile, userService.findOne(editUserId));
}

Step 4 – create new interface called AmazonService.java

package com.mightyjava.service;
import org.springframework.web.multipart.MultipartFile;
import com.mightyjava.model.User;

public interface AmazonService {
     String uploadFile(MultipartFile multipartFile, User user);
}

Step 5 – Need to implement this interface so create a new class called AmazonServiceImpl.java and inside this under uploadFile method once we get the URL we will set this for user profile photo so it can save this as well.

package com.mightyjava.service.impl;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import javax.annotation.PostConstruct;
import org.codehaus.jettison.json.JSONException;
import org.codehaus.jettison.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3Client;
import com.amazonaws.services.s3.model.CannedAccessControlList;
import com.amazonaws.services.s3.model.PutObjectRequest;
import com.mightyjava.model.User;
import com.mightyjava.service.AmazonService;
import com.mightyjava.service.UserService;
import com.mightyjava.utils.ConstantUtils;

@Service
public class AmazonServiceImpl implements AmazonService {

     private AmazonS3 s3Client;
     @Autowired
     private UserService userService;

     @PostConstruct
     private void initializeAmazon() {
          this.s3Client = new AmazonS3Client(new BasicAWSCredentials(ConstantUtils.ACCESS_KEY, ConstantUtils.SECRET_KEY));
     }

     @Override
     public String uploadFile(MultipartFile multipartFile, User user) {
          String fileUrl = "";
          JSONObject jsonObject = new JSONObject();
          try {
               File file = convertMultipartToFile(multipartFile);
               String fileName = new Date().getTime()+"-"+multipartFile.getOriginalFilename().replace(" ", "_");
               fileUrl = ConstantUtils.END_POINT_URL+"/"+ConstantUtils.BUCKET_NAME+"/"+fileName;
               s3Client.putObject(new PutObjectRequest(ConstantUtils.BUCKET_NAME, fileName, file).withCannedAcl(CannedAccessControlList.PublicRead));
               user.setProfilePhoto(fileUrl);
               userService.addUser(user);
               jsonObject.put("status", "success");
               jsonObject.put("imageUrl", fileUrl);
               jsonObject.put("message", "File Uploaded Successfully.");
          } catch (IOException | JSONException e) {
               e.printStackTrace();
          }
          return jsonObject.toString();
     }

     private File convertMultipartToFile(MultipartFile file) throws IOException {
          File convertFile = new File(file.getOriginalFilename());
          FileOutputStream fos = new FileOutputStream(convertFile);
          fos.write(file.getBytes());
          fos.close();
          return convertFile;
     }
}

Step 6 – Now we will see how to reach request till controller. so add new button called Upload

<form id="uploadImage" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h4 class="modal-title">Upload User Profile for ${userForm.fullName}</h4>
	</div>
	<div class="modal-body">
		<div class="form-group">
			<input type="hidden" name="editUserId" value="${userForm.id}">
			<label class="col-md-3 control-label">Upload File :</label>
			<div class="col-md-6">
				<input type="file" name="file" class="form-control">
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="submit" class="btn btn-default">Upload</button>
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
</form>

Step 7 – Now when we click on Upload button, using AJAX we will submit the form and call controller upload method

$("#uploadImage").on("submit", function(e) {
     e.preventDefault();
     var formData = new FormData(this);
     $.ajax({
          type:"POST",
          url:"/mightyjava/user/upload",
          data:formData,
          cache:false,
          dataType:"json",
          contentType:false,
          processData:false,
          success:function(data) {
               var title="Upload Confirmation";
               if(data.status == "success") {
                    toastr.success(data.message, title, {
                         closeButton:true
                    });
                    fetchList("user");
                    $("#uploadModal").modal("hide");
                    $("body").removeClass("modal-open");
                    $(".modal-backdrop").remove();
               } else {
                    toastr.error(data.message, title, {
                         allowHtml:true,
                         closeButton:true
                    });
               }
          }
     });
});

That’s it. Here is the demo

when you click on Upload Button pop up will open

once file selected and click on upload then upload success message will come like below image

 

you can download code from GITHUB

Watch the video, you will get complete understanding.