Steps by Step Implementation for Multiple File Upload

• Create a Spring Stater Project using Spring Tool Suite. (Create a Spring Boot Project)
• While Creating the Project Select the required Dependencies (mentioned below) for this Application.
• After completion of the project creation In the Main Project Package create one Controller class for Handling the Multiple File Upload process
• After That create one HTML File in the Templates which is located in the Resources folder in the main project file and develop the Front-End code using HTML, Bootstrap is used for creating the Template, and Ajax and JQuery are used for providing the Dynamic Behavior for Progress Bar.
• Once completed both Front-End and Back-End Development Then run this project as Run a Spring Boot App. Then open localhost with the default port number in Browser.

Project Dependencies:

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

Project Folder Structure

Now we will start the development process of Back-End Using Spring Boot with MVC Pattern and Thymeleaf for triggering the back-end result on the HTML page.

application.properties File (set application configuration):

# thymeleaf configuration
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
# Maximum file size
spring.servlet.multipart.max-file-size=5MB
# Maximum request size
spring.servlet.multipart.max-request-size=5MB

In above configuration file, we have written Application configuration for Thymeleaf and Maximum and Minimum size of the File in the format of MB’s.

File Uploading process plays an important role in data collection, Information sharing, and other situations. The File Uploading process is done in two instances. Those are the single file upload process and the other one uploading multiple files at a time. It depends upon the logic of the application. In this article, we will discuss the Multiple File Uploading process by using Spring MVC with the help of Ajax and JQuery to display the progress bar while uploading the files into one folder. If all files are uploaded the progress bar shows 100% completion on the HTML page. ( Spring MVC Reference )

Prerequisites

• Spring Boot Framework with MVC Pattern
• Thymeleaf
• Ajax
• JQuery
• Bootstrap
• One Folder for saving uploaded files.
• Project Category is Gradle

The Spring Boot with MVC Pattern is used for triggering the Front-End Logic. For this, we have used Thymeleaf, which works as a bridge between Front-End and Back-End. Any update in the Back end then the Thymeleaf can Trigger the HTML content based upon the back-end functionality. Ajax and JQuery are used for providing Dynamic Behavior of the HTML page and Bootstrap is used for Creating Web Page with Responsive Behavior. After that create one folder in your system for saving the uploaded files.