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

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

Related posts:
MultipartFile – How to create Spring Ajax MultipartFile application to download/upload files | SpringBoot + JQuery Ajax + Bootstrap
How to integrate Http Angularjs with Spring MVC | Spring Boot
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite
Angular 4 – Upload/Get MultipartFile to/from Spring Boot Server

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. Practices

Create a SpringBoot project with below structure:

spring angularjs multipartfile - upload-import - structure projects

Step to do:
– Create SpringBoot project
– Create Storage Service
– Implement upload controller
– Implement AngularJs App
– 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 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

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("/api/getallfiles") is used to get all uploaded files
@GetMapping("/api/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 AngularJs App
4.1 Create AngularJs application

Define AngularJs application in jsaApp.js file:

Note: Angular’s ng-model can NOT bind with file input, so we need to create a custom directive fileModel for binding data.

4.2 Implement upload controller

Create uploadFileCtrl.js file to implement uploadFileController controller:

Note: with setting 'Content-Type': undefined, the browser will automatically change the Content-Type to multipart/form-data.

4.3 Implement get controller

Create a getFilesCtrl.js file to get all 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/ :

spring angularjs multipartfile - index screen

-> See headers:

– Choose files and do Upload:

spring angularjs multipartfile - choose file and do upload

– List uploaded files:

spring angularjs multipartfile - get uploaded list file

– Click on a link to download the file:

spring angularjs multipartfile - download a file

III. Sourcecode


By grokonez | July 17, 2017.

Related Posts

1 thought on “MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.”

Got Something To Say:

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