View Layer
Normally HTML, JSP and other files comes under view layer. In this Application I used HTML pages for displaying user interface. Now we will see the Front-End Code with Its functionality.
Index.html
HTML
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>File Upload with Progress Bar</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/338/338864.png"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </head> <body class="bg-light"> <div class="container mt-5 p-5"> <h4 class="mb-4 text-success" style="font-weight: 700; font-family: 'Times New Roman', Times, serif;">Spring MVC - Multiple File Upload with Progress Bar in Ajax and JQuery</h4> <form id="uploadForm" class="form-control p-5 mt-5"> <div class="mb-3"> <label for="fileInput" class="form-label" style="font-weight: 600;">Select Files</label> <input type="file" class="form-control" id="fileInput" multiple> </div> <button type="button" class="btn btn-success mt-2" onclick="uploadFiles()">Upload</button> </form> <div id="progressBarContainer" class="mt-4" style="display: none;"> <div class="progress"> <div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 100%;">100%</div> </div> </div> </div> <script th:inline="javascript"> /*<![CDATA[*/ var uploadUrl = /*[[@{/upload}]]*/ '/upload'; // Use Thymeleaf to generate the URL function uploadFiles() { var files = $('#fileInput')[0].files; if (files.length === 0) { alert("Please select at least one file."); return; } var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append('files', files[i]); } $.ajax({ url: uploadUrl, type: 'POST', data: formData, contentType: false, processData: false, xhr: function () { var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function (e) { if (e.lengthComputable) { var percentage = (e.loaded / e.total) * 100; $('#progressBar').width(percentage + '%').html(percentage.toFixed(2) + '%'); } }; return xhr; }, success: function (response) { alert(response); $('#progressBarContainer').hide(); }, error: function (error) { alert('Error uploading files: ' + error.responseText); } }); $('#progressBarContainer').show(); } /*]]>*/ </script> </body> </html> |
In the above code we have used HTML, Ajax and JQuery for providing dynamic behavior while uploading the files into server through this Application. In this HTML code we have created one form which is used for selecting files from computer.
Form:
HTML
<form id="uploadForm" class="form-control p-5 mt-5"> <div class="mb-3"> <label for="fileInput" class="form-label" style="font-weight: 600;">Select Files</label> <input type="file" class="form-control" id="fileInput" multiple> </div> <button type="button" class="btn btn-success mt-2" onclick="uploadFiles()">Upload</button> </form> |
This piece code is handling selection files from computer. For selecting files from computer we use one html element that is input with type file. This attribute triggers file selection process. After that we have created one Progress bar.
Progress Bar:
HTML
<div id="progressBarContainer" class="mt-4" style="display: none;"> <div class="progress"> <div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 100%;">100%</div> </div> </div> |
Initially this progress bar hidden. While uploading the files this comes into picture. It is possible by using display: none. By using Bootstrap, we have created one progress with width equals 100%.
Script:
Javascript
<script th:inline="javascript"> /*<![CDATA[*/ var uploadUrl = /*[[@{/upload}]]*/ '/upload'; // Use Thymeleaf to generate the URL function uploadFiles() { var files = $('#fileInput')[0].files; if (files.length === 0) { alert("Please select at least one file."); return; } var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append('files', files[i]); } $.ajax({ url: uploadUrl, type: 'POST', data: formData, contentType: false, processData: false, xhr: function () { var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function (e) { if (e.lengthComputable) { var percentage = (e.loaded / e.total) * 100; $('#progressBar').width(percentage + '%').html(percentage.toFixed(2) + '%'); } }; return xhr; }, success: function (response) { alert(response); $('#progressBarContainer').hide(); }, error: function (error) { alert('Error uploading files: ' + error.responseText); } }); $('#progressBarContainer').show(); } /*]]>*/</script> |
The above code enable dynamic behavior of HTML page while uploading the files. If any errors are raised the alert is enabled by this script. If successfully uploaded then the progress bar is enabled by this script code.
Output:
1. Before Uploading Multiple Files Through Application (Index page):
2. Folder location for uploading files:
3. While No files selected:
4. After Uploading Multiple Files Through Application:
5. Window while uploading files:
6. Directory After file upload:
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