Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server

https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server

When uploading files to Servlet containers, application needs to register a MultipartConfigElement class. But Spring Boot makes it more easy by configuring it automatically. In this tutorial, we're gonna look at way to build an Angular 5 App Client to upload/get MultipartFile to/from Spring Boot RestApi Server.

Related posts:

I. Technologies

  • Angular 5
  • Java 1.8
  • Spring Boot 1.5.7.RELEASE
  • Maven 3.3.9
  • Spring Tool Suite – Version 3.8.1.RELEASE

    II. Overview

    1. Spring Boot Server

    angular-5-upload-multipart-file-spring-boot-spring-structure

  • StorageService helps to init, delete all files, store file, load file

  • UploadController uses StorageService to provide Rest API: POST a file, GET all files

  • application.properties to configure parameters such as MultipartFile max size...

  • Spring Boot Starter Web dependency in pom.xml

    2. Angular 5 App Client

    angular-5-upload-multipart-file-spring-boot-angular-structure

  • upload-file.service provides methods: push File to Storage and get Files.

  • list-upload.component gets and displays list of Files.

  • form-upload.component helps upload File.

  • details-upload.component is detail for each item in list of Files.

angular-5-upload-multipart-file-spring-boot-angular-overview

III. Practice

1. Spring Boot Server

1.1 Create Spring Boot project

With Dependency:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

1.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
    
    package com.javasampleapproach.uploadfiles.storage;

import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.stereotype.Service;
import org.springframework.util.FileSystemUtils;
import org.springframework.web.multipart.MultipartFile;

@Service
public class StorageService {

Logger log = LoggerFactory.getLogger(this.getClass().getName());
private final Path rootLocation = Paths.get("upload-dir");

public void store(MultipartFile file) {
    try {
        Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename()));
    } catch (Exception e) {
        throw new RuntimeException("FAIL!");
    }
}

public Resource loadFile(String filename) {
    try {
        Path file = rootLocation.resolve(filename);
        Resource resource = new UrlResource(file.toUri());
        if (resource.exists() || resource.isReadable()) {
            return resource;
        } else {
            throw new RuntimeException("FAIL!");
        }
    } catch (MalformedURLException e) {
        throw new RuntimeException("FAIL!");
    }
}

public void deleteAll() {
    FileSystemUtils.deleteRecursively(rootLocation.toFile());
}

public void init() {
    try {
        Files.createDirectory(rootLocation);
    } catch (IOException e) {
        throw new RuntimeException("Could not initialize storage!");
    }
}

}

1.3 Create Upload Controller

More at:

https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
0 0
https://grokonez.com/springframework/springmvc/angular4springbootcassandracrudexample no_toc]In this tutorial, grokonez shows you Angular Http Cli...
loveprogramming viết 2 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!