file upload with Angular 2 and Spring

Question

Is there a simple way to upload a file using an Angular client and a Spring server? I had to search through different questions/answers before finding the simplest working solution, using Angular without external libraries. Below the solution I found putting together several answers that I found on StackOverflow, using the StackOverflow question/answer style, hoping it helps.

Answer 1

The solution I found. As soon as I find again the answers from which I took the code, I will put a reference to them.

File Upload In Angular 2?

file-upload.component.html

    <input type="file" 
           (change)="fileChange($event)"
           placeholder="Upload file" 
           accept=".pdf,.doc,.docx">

file-upload.component.ts

    import { Component } from '@angular/core';
    import { RequestOptions, Headers, Http } from '@angular/http';
    import { Observable } from 'rxjs';

    @Component({
      selector: 'file-upload',
      templateUrl: './file-upload.component.html'
    })
    export class FileUploadComponent {

      apiEndPoint = "http://localhost:8080/mySpringApp/upload";

      constructor(private http: Http) {
      }

      fileChange(event) {
        let fileList: FileList = event.target.files;
        if (fileList.length > 0) {
          let file: File = fileList[0];
          let formData: FormData = new FormData();
          formData.append('uploadFile', file, file.name);
          let headers = new Headers();
          headers.append('Accept', 'application/json');
          let options = new RequestOptions({ headers: headers });
          this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
            data => console.log('success'),
            error => console.log(error)
            )
        }
      }
    }

Spring controller:

    package unisvid.sessionManager.server.controller;

    import java.io.BufferedOutputStream;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.util.Iterator;

    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;

    @CrossOrigin(origins = "*")
    @RestController
    public class FileUploadController {

      @RequestMapping(value = "/upload", method = RequestMethod.POST)
      public void UploadFile(MultipartHttpServletRequest request) throws IOException {

        Iterator<String> itr = request.getFileNames();
        MultipartFile file = request.getFile(itr.next());
        String fileName = file.getOriginalFilename();
        File dir = new File("/Users/luigi/Documents/tmp/");
        if (dir.isDirectory()) {
          File serverFile = new File(dir, fileName);
          BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
          stream.write(file.getBytes());
          stream.close();
        }
      }
    }

Answer 2

Angular 2+ provides good support for uploading file.

Here is my solution :

It is very important to leave the Content-Type empty. If you set the 'Content-Type' to 'multipart/form-data' the upload will not work !

upload.component.html

<input type="file" (change)="fileChange($event)" name="file" />

upload.component.ts

export class UploadComponent implements OnInit {
    constructor(public http: Http) {}

    fileChange(event): void {
        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            const file = fileList[0];

            const formData = new FormData();
            formData.append('file', file, file.name);

            const headers = new Headers();
            // It is very important to leave the Content-Type empty
            // do not use headers.append('Content-Type', 'multipart/form-data');
            headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
            const options = new RequestOptions({headers: headers});

            this.http.post('https://api.mysite.com/uploadfile', formData, options)
                 .map(res => res.json())
                 .catch(error => Observable.throw(error))
                 .subscribe(
                     data => console.log('success'),
                     error => console.log(error)
                 );
        }
    }
}