Controller Layer
Now we will create back-end logic for handling multiple files uploading process after that save those files into one folder or specific location. This code is developed under controller layer.
FileUploadController.java:
Java
package com.gfg.articles; import java.io.File; import java.io.IOException; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; @Controllerpublic class FileUploadController { private static final String UPLOAD_DIR = "./src/upload/"; @RequestMapping("/") public String index() { return "index"; } @PostMapping("/upload") @ResponseBody public ResponseEntity<String> handleFileUpload(@RequestParam("files") MultipartFile[] files) { if (files == null || files.length == 0) { return ResponseEntity.badRequest().body("No files selected for upload."); } try { for (MultipartFile file : files) { // Get the file name String fileName = file.getOriginalFilename(); // Create the directory if it doesn't exist File directory = new File(UPLOAD_DIR); if (!directory.exists()) { directory.mkdirs(); } // Save the file to the server File serverFile = new File(directory.getAbsolutePath() + File.separator + fileName); file.transferTo(serverFile); } return ResponseEntity.ok("Files uploaded successfully!"); } catch (IOException e) { e.printStackTrace(); return ResponseEntity.status(500).body("Error uploading files: " + e.getMessage()); } } } |
In the above code we have created different types of end points for different operations like display the html file, uploading files and others. Now we will discuss each end point.
- @RequestMapping(“/”) this end point is used for displaying the HTML page by using Thymeleaf.
- @PostMapping(“/upload”) this end point is used for uploading the files into given location.
- In the above code I take One location for saving uploaded files.
Here MultiPartFile is used for dealing with files from front-end to back-end if file is null or file length equals to 0 then we will throw one error that is no files selected for upload. And this message triggered on HTML page through Thymeleaf. Otherwise, files are successfully uploaded into given location.
Spring MVC – Multiple File Upload with Progress Bar in Ajax and JQuery
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.
Contact Us