Uploading files with Spring Boot and Express

In a traditional microservice premise, a client application (e.g., an Angular frontend) rarely hits a backend service directly. Usually, a middleware (e.g., an Express application) sits between the backend and client, facilitating the communication, as a backend for frontend. In this post, we'll explore how Express can facilitate a file upload with a reactive Spring backend and an Angular frontend.

Create an upload service with Spring Boot

Generate a Spring Boot application with Spring Initializr; include spring-boot-starter-webflux and spring-boot-configuration-processor as the dependencies.

Create an interface that describes the methods to upload and fetch the files.

 1// src/main/java/dev/mflash/guides/upload/service/StorageService.java
 2
 3public interface StorageService {
 4
 5  void init();
 6
 7  void store(List<FilePart> files);
 8
 9  Stream<Path> loadAll();
10
11  Path load(String filename);
12
13  Resource loadAsResource(String filename);
14
15  void deleteAll();
16}

Implement this interface to read and write to a filesystem.

 1// src/main/java/dev/mflash/guides/upload/service/FileSystemStorageService.java
 2
 3public @Service class FileSystemStorageService implements StorageService {
 4
 5  private final Path rootDir;
 6
 7  public FileSystemStorageService(StorageProperties storageProperties) {
 8    this.rootDir = Paths.get(storageProperties.getLocation());
 9  }
10
11  public @Override void init() {
12    try {
13      Files.createDirectories(rootDir);
14    } catch (Exception e) {
15      throw new StorageException("Could not initialize storage", e);
16    }
17  }
18
19  public @Override void store(List<FilePart> files) {
20    if (files.size() > 0) {
21      files.forEach(file -> {
22        String filename = StringUtils.cleanPath(Objects.requireNonNull(file.filename()));
23        if (filename.contains("..")) {
24          throw new StorageException("Cannot store file with relative path outside current directory " + filename);
25        }
26        file.transferTo(Paths.get(this.rootDir.toString(), filename));
27      });
28    } else {
29      throw new StorageException("Invalid request payload");
30    }
31  }
32
33  public @Override Stream<Path> loadAll() {
34    try {
35      return Files.walk(this.rootDir, 1)
36          .filter(path -> !path.equals(this.rootDir))
37          .map(this.rootDir::relativize);
38    } catch (IOException e) {
39      throw new StorageException("Failed to read stored files", e);
40    }
41  }
42
43  public @Override Path load(String filename) {
44    return this.rootDir.resolve(filename);
45  }
46
47  public @Override Resource loadAsResource(String filename) {
48    try {
49      Path file = load(filename);
50      Resource resource = new UrlResource(file.toUri());
51      if (resource.exists() || resource.isReadable()) {
52        return resource;
53      } else {
54        throw new StorageException("Could not read file: " + filename);
55      }
56    } catch (MalformedURLException e) {
57      throw new StorageException("Could not read file: " + filename, e);
58    }
59  }
60
61  public @Override void deleteAll() {
62    FileSystemUtils.deleteRecursively(rootDir.toFile());
63  }
64}

This service

• creates a directory to write files to with init method
• write files with store method
• returns a list of uploaded files with loadAll method
• returns a requested file by name with loadResource method, and
• cleans up the upload directory with deleteAll method

Create a handler to accept a request and prepare the response.

 1// src/main/java/dev/mflash/guides/upload/handler/FileSystemStorageHandler.java
 2
 3public @Controller class FileSystemStorageHandler {
 4
 5  private final StorageService storageService;
 6
 7  public FileSystemStorageHandler(StorageService storageService) {
 8    this.storageService = storageService;
 9  }
10
11  public Mono<ServerResponse> listAllFiles(ServerRequest request) {
12    return ServerResponse.ok().contentType(MediaType.APPLICATION_JSON)
13        .body(BodyInserters.fromValue(storageService.loadAll()));
14  }
15
16  public Mono<ServerResponse> getFile(ServerRequest request) {
17    String fileName = request.queryParam("fileName").get();
18    try {
19      return ServerResponse.ok().contentType(MediaType.APPLICATION_OCTET_STREAM)
20          .header(HttpHeaders.CONTENT_DISPOSITION, String.format("attachment; filename=\"%s\"", fileName)).body(
21              BodyInserters.fromValue(storageService.loadAsResource(fileName))
22          );
23    } catch (StorageException e) {
24      return ServerResponse.notFound().build();
25    }
26  }
27
28  public Mono<ServerResponse> uploadFile(ServerRequest request) {
29    return request.multipartData().flatMap(parts -> {
30      try {
31        storageService
32            .store(parts.get("data").parallelStream().map(part -> (FilePart) part).collect(Collectors.toList()));
33        return ServerResponse.ok().contentType(MediaType.APPLICATION_JSON).body(
34            BodyInserters.fromValue(Map.of("status", "Successfully uploaded"))
35        );
36      } catch (Exception e) {
37        return ServerResponse.status(HttpStatus.INTERNAL_SERVER_ERROR).contentType(MediaType.APPLICATION_JSON).body(
38            BodyInserters.fromValue(Map.of("status", e.getLocalizedMessage()))
39        );
40      }
41    });
42  }
43}

Configure the routes

Note that the handler methods don't have any endpoint information. In a reactive Spring Boot application, this information (also called routes) can be provided through a RouterFunction bean as follows.

 1// src/main/java/dev/mflash/guides/upload/configuration/FileSystemStorageRouter.java
 2
 3public @Configuration class FileSystemStorageRouter {
 4
 5  public @Bean RouterFunction<ServerResponse> storageRouter(FileSystemStorageHandler storageHandler) {
 6    return RouterFunctions
 7        .route(RequestPredicates.GET("/file"), storageHandler::listAllFiles)
 8        .andRoute(RequestPredicates.GET("/file/download"), storageHandler::getFile)
 9        .andRoute(RequestPredicates.POST("/file").and(RequestPredicates.accept(MediaType.MULTIPART_FORM_DATA)),
10            storageHandler::uploadFile);
11  }
12}

Multiple routes can be configured through the same bean, with the type of route and request content-type. The actual requests are simply passed to the handler methods which prepare and return a response.

Configure CORS

Say, we decide to run Express on the port 8080. We'll have to provide a CORS filter to the Spring Boot application so that it may accept the requests from Express. This can be done by overriding the addCorsMappings method of the WebFluxConfigurer interface.

 1// src/main/java/dev/mflash/guides/upload/Launcher.java
 2
 3public @SpringBootApplication class Launcher implements WebFluxConfigurer {
 4
 5  public static void main(String[] args) {
 6    SpringApplication.run(Launcher.class, args);
 7  }
 8
 9  public @Override void addCorsMappings(CorsRegistry registry) {
10    registry.addMapping("/**").allowedOrigins("http://localhost:8080");
11  }
12}

Warning This is a global CORS mapping. Do NOT use such a configuration on production!

Since Express will be running at the port 8080, let's configure a different port for the Spring application by editing application.yml file.

1server:
2  port: 8079

Create an Express middleware

Generate a Node.js application by executing the following command.

yarn init -y

We'll use

• morgan for request logging
• multer to handle multipart/form-data
• form-data to build urlendcoded form-data
• axios to send the requests to the Spring Boot backend
• cors to enable CORS on the requests
• body-parser to parse the request body

Add all these dependencies through the following command.

yarn add express morgan multer form-data axios cors body-parser

Create a file server.js and add the following code.

 1// middleware/server.js
 2
 3const app = express()
 4app.use(cors())
 5app.use(bodyParser.json())
 6app.use(bodyParser.urlencoded({ extended: true }))
 7app.use(morgan('combined'))
 8
 9const port = process.env.PORT || 8080
10const tempDir = 'tmp'
11const context = '/file'
12const backend = `http://localhost:8079${context}`
13
14// configure multer storage
15const storage = multer.diskStorage({
16  destination: (req, file, cb) => cb(null, `${tempDir}/`),
17  filename: (req, file, cb) => cb(null, file.originalname)
18})
19
20//  create / reset temp directory
21const outPath = path.resolve(process.cwd(), tempDir)
22if (fs.existsSync(outPath)) {
23  fs.rmdirSync(outPath, { recursive: true })
24}
25fs.mkdirSync(outPath)
26
27const upload = multer({ storage: storage })
28
29// get list of uploaded files
30app.get(context, async (req, res) => {
31  const response = await axios.get(backend)
32  res.json(response.data)
33})
34
35// download a file by name
36app.get(`${context}/download`, async (req, res) => {
37  if (req.query && req.query.fileName) {
38    const response = await axios.get(`${backend}/download?fileName=${req.query.fileName}`)
39    res.set({ ...response.headers }).send(response.data)
40  }
41})
42
43// upload some files
44app.post(context, upload.array('data'), async (req, res) => {
45  try {
46    const data = req.files
47
48    if (data) {
49      const form = new FormData()
50      data.forEach(file => form.append('data', fs.createReadStream(__dirname + '/' + file.destination + file.filename)))
51
52      const response = await axios.post(backend, form, { headers: form.getHeaders() })
53      res.json(response.data)
54    }
55  } catch (err) {
56    res.status(500).send(err);
57  }
58})
59
60app.listen(port, () => console.log(`App started on port ${port}`))

This application

• creates the routes that correspond to the endpoints of the Spring Boot application
• passes that request to the Spring Boot application with axios in each route, and
• configures multer to save the incoming files for the upload in a tmp directory.

Configure a launch script to start Express.

1"main": "server.js",
2"scripts": {
3  "start": "node ."
4},

By executing yarn start, this Express application gets up and running on port 8080.

Reuse the Angular application for the upload from the post Uploading files with Spring Boot and Angular. Launch it using yarn start. You'll be greeted by a form to upload the files which will appear in the upload directory configured by the Spring Boot application.

References

Source code — springrx-file-upload