Angular 5 - Upload/Get Images to/from Spring Boot Server

Upload files to Servlet containers, application need 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 Images to/from Spring Boot RestApi Server.

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-image-spring-boot-server-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>

<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!");
		}
	}
}

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

package com.javasampleapproach.uploadfiles.controller;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;

import com.javasampleapproach.uploadfiles.storage.StorageService;

@Controller
public class UploadController {

	@Autowired
	StorageService storageService;

	List<String> files = new ArrayList<String>();

	@PostMapping("/post")
	public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
		String message = "";
		try {
			storageService.store(file);
			files.add(file.getOriginalFilename());

			message = "You successfully uploaded " + file.getOriginalFilename() + "!";
			return ResponseEntity.status(HttpStatus.OK).body(message);
		} catch (Exception e) {
			message = "FAIL to upload " + file.getOriginalFilename() + "!";
			return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);
		}
	}

	@GetMapping("/getallfiles")
	public ResponseEntity<List<String>> getListFiles(Model model) {
		List<String> fileNames = files
				.stream().map(fileName -> MvcUriComponentsBuilder
						.fromMethodName(UploadController.class, "getFile", fileName).build().toString())
				.collect(Collectors.toList());

		return ResponseEntity.ok().body(fileNames);
	}

	@GetMapping("/files/{filename:.+}")
	@ResponseBody
	public ResponseEntity<Resource> getFile(@PathVariable String filename) {
		Resource file = storageService.loadFile(filename);
		return ResponseEntity.ok()
				.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
				.body(file);
	}
}

package com.javasampleapproach.uploadfiles.controller;

import java.util.ArrayList;

import java.util.List;

import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.core.io.Resource;

import org.springframework.http.HttpHeaders;

import org.springframework.http.HttpStatus;

import org.springframework.http.ResponseEntity;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;

import com.javasampleapproach.uploadfiles.storage.StorageService;

@Controller

public class UploadController {

@Autowired

StorageService storageService;

List<String> files = new ArrayList<String>();

@PostMapping("/post")

public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {

String message = "";

try {

storageService.store(file);

files.add(file.getOriginalFilename());

message = "You successfully uploaded " + file.getOriginalFilename() + "!";

return ResponseEntity.status(HttpStatus.OK).body(message);

} catch (Exception e) {

message = "FAIL to upload " + file.getOriginalFilename() + "!";

return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);

}

@GetMapping("/getallfiles")

public ResponseEntity<List<String>> getListFiles(Model model) {

List<String> fileNames = files

.stream().map(fileName -> MvcUriComponentsBuilder

.fromMethodName(UploadController.class, "getFile", fileName).build().toString())

.collect(Collectors.toList());

return ResponseEntity.ok().body(fileNames);

}

@GetMapping("/files/{filename:.+}")

@ResponseBody

public ResponseEntity<Resource> getFile(@PathVariable String filename) {

Resource file = storageService.loadFile(filename);

return ResponseEntity.ok()

.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")

.body(file);

}

1.4 Config multipart.max-file

Open application.properties:

spring.http.multipart.max-file-size=500KB
spring.http.multipart.max-request-size=500KB

1 2	spring.http.multipart.max-file-size=500KB spring.http.multipart.max-request-size=500KB

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

1.5 Init Storage for File System

package com.javasampleapproach.uploadfiles;

import javax.annotation.Resource;

import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.javasampleapproach.uploadfiles.storage.StorageService;

@SpringBootApplication
public class SpringBootUploadFileApplication implements CommandLineRunner {

	@Resource
	StorageService storageService;

	public static void main(String[] args) {
		SpringApplication.run(SpringBootUploadFileApplication.class, args);
	}

	@Override
	public void run(String... arg) throws Exception {
		storageService.deleteAll();
		storageService.init();
	}
}

package com.javasampleapproach.uploadfiles;

import javax.annotation.Resource;

import org.springframework.boot.CommandLineRunner;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.javasampleapproach.uploadfiles.storage.StorageService;

@SpringBootApplication

public class SpringBootUploadFileApplication implements CommandLineRunner {

@Resource

StorageService storageService;

public static void main(String[] args) {

SpringApplication.run(SpringBootUploadFileApplication.class, args);

}

@Override

public void run(String... arg) throws Exception {

storageService.deleteAll();

storageService.init();

}

2. Angular 5 App Client

2.1 App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ListUploadComponent } from './upload/list-upload/list-upload.component';
import { FormUploadComponent } from './upload/form-upload/form-upload.component';
import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';
import { UploadFileService } from './upload/upload-file.service';

@NgModule({
  declarations: [
    AppComponent,
    ListUploadComponent,
    FormUploadComponent,
    DetailsUploadComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [UploadFileService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ListUploadComponent } from './upload/list-upload/list-upload.component';

import { FormUploadComponent } from './upload/form-upload/form-upload.component';

import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';

import { UploadFileService } from './upload/upload-file.service';

@NgModule({

declarations: [

AppComponent,

ListUploadComponent,

FormUploadComponent,

DetailsUploadComponent

imports: [

BrowserModule,

HttpClientModule

providers: [UploadFileService],

bootstrap: [AppComponent]

})

export class AppModule { }

2.2 Upload File Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UploadFileService {

  constructor(private http: HttpClient) { }

  pushFileToStorage(file: File): Observable<HttpEvent<{}>> {
    const formdata: FormData = new FormData();

    formdata.append('file', file);

    const req = new HttpRequest('POST', '/post', formdata, {
      reportProgress: true,
      responseType: 'text'
    });

    return this.http.request(req);
  }

  getFiles(): Observable<any> {
    return this.http.get('/getallfiles');
  }
}

import { Injectable } from '@angular/core';

import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

@Injectable()

export class UploadFileService {

constructor(private http: HttpClient) { }

pushFileToStorage(file: File): Observable<HttpEvent<{}>> {

const formdata: FormData = new FormData();

formdata.append('file', file);

const req = new HttpRequest('POST', '/post', formdata, {

reportProgress: true,

responseType: 'text'

});

return this.http.request(req);

}

getFiles(): Observable<any> {

return this.http.get('/getallfiles');

}

2.3 Component for getting List of Images

list-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'list-upload',
  templateUrl: './list-upload.component.html',
  styleUrls: ['./list-upload.component.css']
})
export class ListUploadComponent implements OnInit {

  showFile = false;
  fileUploads: Observable<string[]>;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  showFiles(enable: boolean) {
    this.showFile = enable;

    if (enable) {
      this.fileUploads = this.uploadService.getFiles();
    }
  }
}

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { UploadFileService } from '../upload-file.service';

@Component({

selector: 'list-upload',

templateUrl: './list-upload.component.html',

styleUrls: ['./list-upload.component.css']

})

export class ListUploadComponent implements OnInit {

showFile = false;

fileUploads: Observable<string[]>;

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

}

showFiles(enable: boolean) {

this.showFile = enable;

if (enable) {

this.fileUploads = this.uploadService.getFiles();

}

list-upload.component.html

<button class="button btn-info" *ngIf='showFile' (click)='showFiles(false)'>Hide Images</button>

<button class="button btn-info" *ngIf='!showFile' (click)='showFiles(true)'>Show Images</button>

<div [hidden]="!showFile">
  <div class="panel panel-primary">
    <div class="panel-heading">List of Images</div>
    <div *ngFor="let file of fileUploads | async">
      <div class="panel-body">
        <details-upload [fileUpload]='file'></details-upload>
      </div>
    </div>
  </div>
</div>

<button class="button btn-info" *ngIf='showFile' (click)='showFiles(false)'>Hide Images</button>

<button class="button btn-info" *ngIf='!showFile' (click)='showFiles(true)'>Show Images</button>

<div class="panel-heading">List of Images</div>

<details-upload [fileUpload]='file'></details-upload>

</div>

details-upload.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'details-upload',
  templateUrl: './details-upload.component.html',
  styleUrls: ['./details-upload.component.css']
})
export class DetailsUploadComponent implements OnInit {

  @Input() fileUpload: string;

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit, Input } from '@angular/core';

@Component({

selector: 'details-upload',

templateUrl: './details-upload.component.html',

styleUrls: ['./details-upload.component.css']

})

export class DetailsUploadComponent implements OnInit {

@Input() fileUpload: string;

constructor() { }

ngOnInit() {

}

details-upload.component.html

<img src="{{fileUpload}}" alt="{{fileUpload}}" style="max-width:350px" />

1	<img src="{{fileUpload}}" alt="{{fileUpload}}" style="max-width:350px" />

2.4 Component for uploading Image

form-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpResponse, HttpEventType } from '@angular/common/http';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'form-upload',
  templateUrl: './form-upload.component.html',
  styleUrls: ['./form-upload.component.css']
})
export class FormUploadComponent implements OnInit {

  selectedFiles: FileList;
  currentFileUpload: File;
  progress: { percentage: number } = { percentage: 0 };

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  selectFile(event) {
    const file = event.target.files.item(0);

    if (file.type.match('image.*')) {
      this.selectedFiles = event.target.files;
    } else {
      alert('invalid format!');
    }
  }

  upload() {
    this.progress.percentage = 0;

    this.currentFileUpload = this.selectedFiles.item(0);
    this.uploadService.pushFileToStorage(this.currentFileUpload).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    });

    this.selectedFiles = undefined;
  }
}

import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpResponse, HttpEventType } from '@angular/common/http';

import { UploadFileService } from '../upload-file.service';

@Component({

selector: 'form-upload',

templateUrl: './form-upload.component.html',

styleUrls: ['./form-upload.component.css']

})

export class FormUploadComponent implements OnInit {

selectedFiles: FileList;

currentFileUpload: File;

progress: { percentage: number } = { percentage: 0 };

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

}

selectFile(event) {

const file = event.target.files.item(0);

if (file.type.match('image.*')) {

this.selectedFiles = event.target.files;

} else {

alert('invalid format!');

}

upload() {

this.progress.percentage = 0;

this.currentFileUpload = this.selectedFiles.item(0);

this.uploadService.pushFileToStorage(this.currentFileUpload).subscribe(event => {

if (event.type === HttpEventType.UploadProgress) {

this.progress.percentage = Math.round(100 * event.loaded / event.total);

} else if (event instanceof HttpResponse) {

console.log('File is completely uploaded!');

}

});

this.selectedFiles = undefined;

}

form-upload.component.html

<div *ngIf="currentFileUpload" class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" attr.aria-valuenow="{{progress.percentage}}"
    aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width:progress.percentage+'%'}">
    {{progress.percentage}}%</div>
</div>

<label class="btn btn-default">
  <input type="file" (change)="selectFile($event)">
</label>

<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>

<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" attr.aria-valuenow="{{progress.percentage}}"

aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width:progress.percentage+'%'}">

{{progress.percentage}}%</div>

</div>

</label>

<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>

2.5 App Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'JavaSampleApproach';
  description = 'Angular-SpringBoot Demo';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'JavaSampleApproach';

description = 'Angular-SpringBoot Demo';

}

app.component.html

<div class="container" style="width:400px">
  <div style="color: blue; margin-bottom: 20px">
    <h1>{{title}}</h1>
    <h3>{{description}}</h3>
  </div>

  <form-upload></form-upload>

  <br/>
  <br/>

  <list-upload></list-upload>
</div>

<h1>{{title}}</h1>

<h3>{{description}}</h3>

</div>

<form-upload></form-upload>

<br/>

<list-upload></list-upload>

</div>

2.6 Integrate Spring Boot Server with Angular 5 client

– Create proxy.conf.json file under project:

{
	"/": {
		"target": "http://localhost:8080",
		"secure": false
	}
}

{

"/": {

"target": "http://localhost:8080",

"secure": false

}

– Edit package.json file for “start” script:

...
"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},
...

...

"scripts": {

"ng": "ng",

"start": "ng serve --proxy-config proxy.conf.json",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

...

3. Check Results

Run Spring Boot Server and Angular 5 Client App, go to http://localhost:4200/:
angular-5-upload-image-spring-boot-server-run

Upload files and show list of Files:
angular-5-upload-image-spring-boot-server-result

IV. Sourcecode

– SpringBootUploadFile
– Angular5Upload-Images

By grokonez | March 30, 2018.

5 thoughts on “Angular 5 – Upload/Get Images to/from Spring Boot Server”

pupsor says:

March 31, 2018 at 12:22 pm

An interesting thing about Angular is that uploading files is barely handled by anyone. It’s not mentioned in the docs and the first thing you find by using Google is a third party lib, ng2-file-upload .

Sum says:

May 27, 2018 at 12:57 pm

Hi,

I am getting this error “Response for preflight has invalid HTTP status code 403.”
I replicated the same example.
I dont know what I m missing.

1. Sum says:
  
  May 27, 2018 at 1:03 pm
  
  Hi,
  
  It was resolved by adding @CorsOrigin in controller.
  
  Thanks
  
garmy says:

July 6, 2018 at 4:01 pm

“timestamp”: “2018-07-06T15:43:00.228+0000”,
“status”: 400,
“error”: “Bad Request”,
“message”: “Required request part ‘file’ is not present”,

bonjour je vient de suivre votre tutoriel mais j’ai cette erreur

1. LEANDRO FRANCHI says:
  
  July 10, 2018 at 9:46 pm
  
  me too

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

I. Technologies

II. Overview

1. Spring Boot Server

2. Angular 5 App Client

III. Practice

1. Spring Boot Server

1.1 Create Spring Boot project

1.2 Create Storage Service for File Systems

1.3 Create Upload Controller

1.4 Config multipart.max-file

1.5 Init Storage for File System

2. Angular 5 App Client

2.1 App Module

2.2 Upload File Service

2.3 Component for getting List of Images

2.4 Component for uploading Image

2.5 App Component

2.6 Integrate Spring Boot Server with Angular 5 client

3. Check Results

IV. Sourcecode

Post Tags

5 thoughts on “Angular 5 – Upload/Get Images to/from Spring Boot Server”

Got Something To Say: Cancel reply

I. Technologies

II. Overview

1. Spring Boot Server

2. Angular 5 App Client

III. Practice

1. Spring Boot Server

1.1 Create Spring Boot project

1.2 Create Storage Service for File Systems

1.3 Create Upload Controller

1.4 Config multipart.max-file

1.5 Init Storage for File System

2. Angular 5 App Client

2.1 App Module

2.2 Upload File Service

2.3 Component for getting List of Images

2.4 Component for uploading Image

2.5 App Component

2.6 Integrate Spring Boot Server with Angular 5 client

3. Check Results

IV. Sourcecode

Related Posts

Post Tags

5 thoughts on “Angular 5 – Upload/Get Images to/from Spring Boot Server”

Got Something To Say: Cancel reply