File Upload with Angular2 to REST API

by

This is actually really easy to do in the final release. Took me a while to wrap my head around it because most information about it that I’ve come across is outdated. Posting my solution here in case anyone else is struggling with this.

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'file-upload',
    template: '<input type="file" [multiple]="multiple" #fileInput>'
})
export class FileUploadComponent {
    @Input() multiple: boolean = false;
    @ViewChild('fileInput') inputEl: ElementRef;

    constructor(private http: Http) {}

    upload() {
        let inputEl: HTMLInputElement = this.inputEl.nativeElement;
        let fileCount: number = inputEl.files.length;
        let formData = new FormData();
        if (fileCount > 0) { // a file was selected
            for (let i = 0; i < fileCount; i++) {
                formData.append('file[]', inputEl.files.item(i));
            }
            this.http
                .post('http://your.upload.url', formData)
                // do whatever you do...
                // subscribe to observable to listen for response
        }
    }
}

Then just use it like so:

<file-upload #fu (change)="fu.upload()" [multiple]="true"></file-upload>

That is really all there is to it.

Alternatively, capture the event object and get the files from the srcElement. Not sure if any way is better than the other, to be honest!

Keep in mind FormData is IE10+, so if you have to support IE9 you’ll need a polyfill.

Update 2017-01-07

Updated code to be able to handle uploading of multiple files. Also my original answer was missing a rather crucial bit concerning FormData (since I moved the actual upload logic to a separate service in my own app I was handling it there).

More Related Contents:

  1. What is the difference between ApplicationContext and WebApplicationContext in Spring MVC?
  2. Spring Boot not serving static content
  3. Spring 3 RequestMapping: Get path value
  4. No WebApplicationContext found: no ContextLoaderListener registered?
  5. Springboot/Angular2 – How to handle HTML5 urls?
  6. ApplicationContextException: Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean
  7. create two method for same url pattern with different arguments
  8. When use ResponseEntity and @RestController for Spring RESTful applications
  9. Can SpringMVC be configured to process all requests, but exclude static content directories?
  10. Spring Security exclude url patterns in security annotation configurartion
  11. Spring MVC – Why not able to use @RequestBody and @RequestParam together
  12. automatically add header to every response
  13. How exactly does the Spring BeanPostProcessor work?
  14. No Spring WebApplicationInitializer types detected on classpath
  15. A ‘simple’ way to implement Swagger in a Spring MVC application
  16. spring autowiring with unique beans: Spring expected single matching bean but found 2
  17. How to map dynamic url /prj/noticeOpen/2 in Spring MVC controller
  18. getting exception: No bean named ‘springSecurityFilterChain’ is defined
  19. spring autowiring not working from a non-spring managed class
  20. Spring MVC @RestController and redirect
  21. How to parse gzip encoded response with RestTemplate in Spring-Web
  22. java.lang.IllegalArgumentException: A ServletContext is required to configure default servlet handling
  23. Spring Security 3.2 CSRF disable for specific URLs
  24. Configure Multiple MongoDB repositories with Spring Data Mongo
  25. Spring: @ModelAttribute VS @RequestBody
  26. Spring-MVC: What are a “context” and “namespace”?
  27. Looking for a Simple Spring security example [closed]
  28. Spring MVC bean mapping to HTTP GET request parameters similar to @BeanParam
  29. Is it possible to invalidate a spring security session?
  30. Using both Thymeleaf and JSP

Leave a Comment