Angular file upload Spring Boot

Radouane ROUFID

5 years ago

Angular

This tutorial shows a step by step solution to Angular file upload Spring Boot backend and store it on file system. We will cover a file upload from a basic input and also from a drag-drop area.

Table of contents

1 Server side
- 1.1 Spring Boot Controller
- 1.2 Spring Component FileService
2 Client side with Angular
- 2.1 Angular Module
- 2.2 Angular component

Server side

This section covers the Spring Boot server implementation

Spring Boot Controller

Our Spring Boot application exposes a single endpoint to upload files. Below it’s content :

package com.roufid.tutorials.controller;

import com.roufid.tutorials.service.FileService;

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

import org.springframework.http.HttpStatus;

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

import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController

public class FileController {

private final FileService fileService;

@Autowired

public FileController(FileService fileService) {

this.fileService = fileService;

}

@PostMapping(value = "/api/files")

@ResponseStatus(HttpStatus.OK)

public void handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {

fileService.storeFile(file);

}

@RestController is used to make the Java Class handle HTTP requests. @RestController is a shortcut of the combination of @Controller along with @ResponseBody.
The controller handles one POST HTTP request. The file is sent a request parameter named “file” of type MultipartFile

The controller is as simple as you see. Let’s see now the FileService.

Spring Component FileService

We extracted the logic of storing the file a Spring Component FileService. Below it’s content :

package com.roufid.tutorials.service;

import org.springframework.stereotype.Component;

import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

import java.nio.file.Files;

import java.nio.file.Path;

import java.nio.file.Paths;

import java.nio.file.StandardCopyOption;

@Component

public class FileService {

private static final String FILE_DIRECTORY = "/var/files";

public void storeFile(MultipartFile file) throws IOException {

Path filePath = Paths.get(FILE_DIRECTORY + "/" + file.getOriginalFilename());

Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);

}

That’s it for server side. Let’s see now the front end implementation.

Client side with Angular

Angular CLI is used to create the Angular application along with ng2-file-upload module to handle file upload from client side.

Angular Module

First, add the FileUploadModule to app.module.ts

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

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

import {FileUploadModule} from 'ng2-file-upload';

import { AppRoutingModule } from './app-routing.module';

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FileUploadModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Angular component

Our main component contains a input of type “file” and a drag-and-drop area :

app.component.html

<h1>Roufid File upload tutorial</h1>

<div>

<div class="drop-box" ng2FileDrop

[ngClass]="{'dragover': isDropOver}"

[uploader]="uploader"

(fileOver)="fileOverAnother($event)"

(click)="fileClicked()">

<span class="drag-in-title">Import or drag file here</span>

</div>

<router-outlet></router-outlet>

A CSS is added to make the look and feel pretty

app.component.scss

.drop-box {

cursor: pointer;

background: #F8F8F8;

border: 5px dashed #DDD;

text-align: center;

padding: 40px;

}

.drag-over-title {

display: none;

}

.drop-box.dragover {

opacity: 0.6;

}

.drop-box.dragover .drag-over-title {

display: block;

}

.drop-box.dragover .drag-in-title {

display: none;

}

input[type='file'] {

display: none;

}

And then creating the logic in the TypeScript component.

app.component.ts

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

import {FileUploader} from 'ng2-file-upload';

@Component({

selector: 'app-root',

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

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

})

export class AppComponent implements OnInit {

@ViewChild('fileInput') fileInput: ElementRef;

uploader: FileUploader;

isDropOver: boolean;

ngOnInit(): void {

const headers = [{name: 'Accept', value: 'application/json'}];

this.uploader = new FileUploader({url: 'api/files', autoUpload: true, headers: headers});

this.uploader.onCompleteAll = () => alert('File uploaded');

}

fileOverAnother(e: any): void {

this.isDropOver = e;

}

fileClicked() {

this.fileInput.nativeElement.click();

}

That’s is. The result looks like :

Angular Spring boot file upload

The tutorial source code is available on Github. Download the source

Server side

Spring Boot Controller

Spring Component FileService

Client side with Angular

Angular Module

Angular component

References