MultipartFile – How to create Spring Ajax MultipartFile application to download/upload files | SpringBoot + JQuery Ajax + Bootstrap.

In the past post, we had learned how to upload MultipartFile with SpringBoot. Today, JavaSampleApproach shows how to create a Spring Ajax MultipartFile application to download/upload file with SpringBoot, JQuery Ajax and Bootstrap.

Related posts:
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot
How to integrate SpringBoot with Bootstrap and JQuery
MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.
Jquery loads Image from SpringBoot RestAPI

I. Technologies

– Java 8
– Maven 3.6.1
– Spring Tool Suite: Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE
– JQuery
– Bootstrap

II. Practice

Create a SpringBoot project with below structure:

Spring Ajax Multipartfile download upload Multipartfile - project structure

Step to do:
– Create SpringBoot project
– Create Storage Service
– Implement upload controller
– Implement Post/Get Jquery Ajax
– Create upload page
– Init Storage for File System
– Run and check results

1. Create SpringBoot project

Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
– For Template Engines, choose Thymeleaf.
– For Web MVC, choose Web->Web

SpringBoot Ajax download upload Multipartfile - add dependencies

Press Finish, Spring Boot project will be created successfully.
Open pom.xml file to check dependencies:

2. Create Storage Service for File Systems

Create StorageService with 4 functions:
public void store(MultipartFile file): save a file
public Resource loadFile(String filename): load a file
public void deleteAll(): remove all uploaded files
public void init(): create upload directory

3. Implement upload controller

Create a RestUploadController with 3 RequestMapping:
@PostMapping("/api/uploadfile") is used to upload files.
@GetMapping("/getallfiles") is used to get all uploaded files
@GetMapping("/files/{filename:.+}") is used to download files.

Open file, configure multipart.max-file:

spring.http.multipart.max-file-size: limit total file size for each request.
spring.http.multipart.max-request-size: limit total request size for a multipart/form-data.

4. Implement Post/Get Jquery Ajax
4.1 Post Ajax

doAjax() function is used to upload multipart file to SpringBoot RestApi: @PostMapping("/api/uploadfile").

4.2 Get Ajax

ajaxGet() is used to get URIs of uploaded files.

5. Create upload page

– Create a Controller for uploading page:

– Use Bootstrap to implement upload page:

6. Init Storage for File System

In main class of the SpringBoot application, we use CommandLineRunner interface for initialize StorageService:

7. Run and check results

Build and Run the SpringBoot project with commandlines {mvn clean install, mvn spring-boot:run}

– Make a request http://localhost:8080/ :

SpringBoot Ajax download upload Multipartfile - entry request

– Choose files and do Upload:

SpringBoot Ajax download upload Multipartfile - upload file 1

– List uploaded files:

– Click on a link to download the file:

SpringBoot download upload Multipartfile - download a file

III. Sourcecode


By JavaSampleApproach | July 15, 2017.

Last updated on November 18, 2017.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *