Angular, Java, Software Development, Spring

Spring Boot Upload Multiple Files From Angular

This post shows how to upload multiple files from Angular to a Spring Boot backend application. More often than not, applications need to upload multiple files at a time. We have codes both for the frontend and backend applications.

Requirements

We used the following items for this post – Angular 11, Angular CLI, JDK 14, IntelliJ IDEA, Node 12, Postman, and Windows 10. Both the JDK 14 and Node 12 are from their respective zip distributions. Meaning, we didn’t install them using their installers. Instead, we extracted them into some folders. As a result, we need to explicitly include these folders to use JDK 14 and Node 12.

Spring Boot Backend that Accepts Multiple Files

First, we create a Spring Boot backend application that accepts multiple file uploads from our Angular application (later on this). The fastest way to generate a Spring Boot project is differently through Spring Initialzr or via IntelliJ.

Create Spring Boot Backend Via IntelliJ

Although we create a Spring Boot project in IntelliJ IDEA, we will still use Spring Initialzr indirectly. First, go to File > New > Project.... Then, choose Spring Initialzr. Next, fill in the data as shown in each photo.

Create Spring Boot Backend Via Spring Initialzr – Alternative, Optional

To create a Spring Boot backend application via Spring Intialzr, we head to https://start.spring.io/. Then, fill in some fields, as shown below.

Spring Boot Upload Multiple Files

Next, click the Generate button to generate our project in zip format, e.g., turretademo.zip. Then, extract the files and open the project in IntelliJ IDEA.

Create a REST Controller In Our Spring Boot Application

Next, we create the controller to handle the uploading of multiple files at a time. Note on the use of @CrossOrigin. For demonstration purposes, this annotation allows our Angular application to communicate with our backend application from the browser. Please don’t use this annotation lightly and avoid using it as is in production environments.

Next, we test the controller using Postman. Ensure the Spring Boot backend application is running. Then, create a POST request with the following details, shown in the image below. Then, click the Send button to upload the files.

Spring Boot Upload Multiple Files

Create Angular Frontend Application To Upload Multiple Files To Spring Boot

We’re almost done now. This time, we’re creating the Angular frontend application to upload multiple files to our Spring Boot application. Let’s create the application via the command line window. First, we need to include node.exe  in the path using the following MS-DOS command.

Assuming we already have installed Angular CLI, run the following command to create a new Angular project in a separate directory (please create first).

Spring Boot Upload Multiple Files

Then, change-directory into the client-upload-files directory. Later, we will start up the application from the same command line window.

Modify Multiple Files In The Angular Project

First, modify the app-routing.module.ts file as follows. We assigned the route /upload to our Angular component. This route allows us to type in the URI to load the HTML form.

Second, modify the app.module.ts to include the AppRoutingModule (if not available), ReactiveFormsModule, and HttpClientModule. We also need to include our FileUploadComponentComponent in the declarations section.

Third, modify app.component.html to remove everything except the following line.

Fourth, replace the content of file-upload-component.component.html  with the following codes.

Lastly, replace the content of file-upload-component.component.ts with the following codes.

Then, go back to the command-line window and boot up the Angular application.

Sample demonstration as follows.

Spring Boot Upload Multiple Files

You Might Also Like