Last updated: Nov 04, 2023

Upload Image File as Base64 String in Spring Boot

To upload image files as a String in Spring Boot, the file must first be converted into a Base64 string on the frontend and transfer the resulting encoded string value to the backend via a REST api. However, it's important to be aware that the Base64 encoding increases the size of the file by approximately 33% compared to its original size. Due to this size increase and associated overhead, many developers prefer alternative methods for image file uploads in Spring Boot.

Follow these steps to upload image files as a String in Spring Boot:

1. Create a simple data transfer object (DTO) class with two private member variables: fileContent and fileName. These variables hold the Base64-encoded content of the image file and the filename, respectively. This class provides getter and setter methods for accessing and modifying the values of the member variables. Here's an example DTO class:

public class MyRequestDto {
  private String fileContent;
  private String fileName;

  public String getFileContent() {
    return fileContent;
  }

  public void setFileContent(String fileContent) {
    this.fileContent = fileContent;
  }

  public String getFileName() {
    return fileName;
  }

  public void setFileName(String fileName) {
    this.fileName = fileName;
  }

}

2. Create a class to represent a Spring Boot controller that handles image file uploads. In this example, the controller is named ImageUploadController. Annotate the class with @RestController to indicate that it is a controller class that handles HTTP requests and produces responses. Annotate the controller with @RequestMapping annotation to specify the base URL mapping for all endpoints within this controller. In this case, the base URL is set to "/files". Create a fileUpload method, annotated with @PostMapping and define the endpoint for uploading image file as a String. Include a parameter of the same DTO class type that was previously created. This parameter expects an object to be passed as the request body, representing the data of the file. Within the uploadFile method, you can perform actions such as saving the image's Base64 string to a database or further processing the file data according to your application's needs. Here's an example controller code:

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping(path = "/files")
public class ImageUploadController {

  @PostMapping(path = "/upload-image")
  public void uploadFile(@RequestBody  MyRequestDto myRequestDto) {
     String fileContent = myRequestDto.getFileContent();
     String filename = myRequestDto.getFileName();

     // Here code to save the fileContent and filename to database
  }
}

If you intend to store the file as a string in a database, it is important to save the filename alongside it. The filename will be necessary in the future when you want to convert the base64 value back into a file. Therefore, to ensure a smooth conversion process, it is recommended to store and associate the filename along with the base64 representation of the file in the database.