Currently, only string input is accepted for the post, put, and patch methods in Angular2's HTTP support.

To work around this limitation, you can directly access the XHR object as shown below:

import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class UploadService {
  constructor () {
    this.progress$ = Observable.create(observer => {
      this.progressObserver = observer
    }).share();
  }

  private makeFileRequest (url: string, params: string[], files: File[]): Observable {
    return Observable.create(observer => {
      let formData: FormData = new FormData(),
        xhr: XMLHttpRequest = new XMLHttpRequest();

      for (let i = 0; i < files.length; i++) {
        formData.append("uploads[]", files[i], files[i].name);
      }

      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            observer.next(JSON.parse(xhr.response));
            observer.complete();
          } else {
            observer.error(xhr.response);
          }
        }
      };

      xhr.upload.onprogress = (event) => {
        this.progress = Math.round(event.loaded / event.total * 100);

        this.progressObserver.next(this.progress);
      };

      xhr.open('POST', url, true);
      xhr.send(formData);
    });
  }
}

For more information, refer to this plunkr link: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info.

An issue and a pending PR related to this topic can be found on the Angular repository:

• https://github.com/angular/angular/issues/10424
• https://github.com/angular/angular/pull/7310/files

I found a solution that has been effective for me:

<input type="file" (change)="uploadFile($event)" required class="form-control " name="attach_file" id="attach_file">
uploadFile(event: any) {
    let fileList: FileList = event.target.files;
if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData:FormData = new FormData();
    formData.append('degree_attachment', file, file.name);
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    this.http.post('http://url', formData,options)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('Upload successful'),
            error => console.log(error)
        )
}}

If you're looking to upload a file using Angular 2, here's a simple solution that has worked for me:

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

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(URL, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

If you encounter the error message "java.io.IOException: RESTEASY007550: Unable to get boundary for multipart," try removing the "Content-Type" header with value "multipart/form-data." This should eliminate the issue.

I found the information in this thread to be incredibly valuable, so I wanted to share my solution with everyone. The initial guidance I received from Brother Woodrow was a great starting point for me. In addition, I must highlight the advice given by Rob Gwynn-Jones on not manually setting the Content-Type header, which saved me a significant amount of time.

This updated version now allows multiple add/remove operations (from different folders) before uploading all files simultaneously.

You can upload multiple files with the same name (from different folders) together without duplicating entries in the upload list (this is actually more complex than it sounds!).

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;

    files: Array<any> = [];
    fileObjects: Array<any> = [];
    fileKeys: Array<string> = [];
    fileCount: number = 0;

    constructor(private http: Http) {}

    addFiles(callback: any) {

        const inputEl: HTMLInputElement = this.inputEl.nativeElement;
        const newCount: number = inputEl.files.length;

        for (let i = 0; i < newCount; i ++) {

            const obj = {
                name: inputEl.files[ i ].name,
                type: inputEl.files[ i ].type,
                size: inputEl.files[ i ].size,
                ts: inputEl.files[ i ].lastModifiedDate
            };

            const key = JSON.stringify(obj);

            if ( ! this.fileKeys.includes(key)) {

                this.files.push(inputEl.files.item(i));
                this.fileObjects.push(obj);
                this.fileKeys.push(key);
                this.fileCount ++;
            }
        }

        callback(this.files);
    }

    removeFile(obj: any) {

        const key: string = JSON.stringify(obj);

        for (let i = 0; i < this.fileCount; i ++) {

            if (this.fileKeys[ i ] === key) {

                this.files.splice(i, 1);
                this.fileObjects.splice(i, 1);
                this.fileKeys.splice(i, 1);
                this.fileCount --;

                return;
            }
        }
    }
}

The callback function in 'addFiles' enables the upload process to occur externally from the component itself. To use the component:

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

The 'setFiles' function serves as the callback mechanism within the parent component context:

    setFiles(files: Array<any>) { this.files = files; }

Finally, before making the API call to upload the files, remember to include the multipart payload (also within the parent component):

const formData = new FormData();
            
for (let i = 0; i < this.files.length; i ++) {

    formData.append('file[]', this.files[ i ]);
}

I hope you find this information useful and feel free to reach out if any updates or corrections are needed. Cheers!

When the uploader triggers the onBeforeUploadItem event, it will update the item's URL by replacing '?' with "?param1=value1".

If you're seeking an easy fix and prefer not to code yourself, I suggest utilizing the following library:

https://www.npmjs.com/package/angular2-http-file-upload

uploadFiles() {
  const formData = new FormData();

  const filesList = this.selectedFiles;
  for (let i = 0; i < filesList.length; i++) {
    formData.append('file', filesList.item(i));
    formData.append('Content-Type', 'application/json');
    formData.append('Accept', `application/json`);
  }

  this.http.post('http://localhost:8080/UploadFiles', formData).subscribe(response => console.log(response));
}

Next step:

<form (ngSubmit)="upload()">
    <input type="file" id="files" multiple (change)="uploadFiles($event.target.files)">
    <button type="submit">Upload Files</button>
</form>

I recently made a change to our header by removing the content-type. Here's an example of what our header used to look like:

 let headers = new Headers({
        'Authorization': 'Bearer ' + this.token,
        'Content-Type': 'multipart/form-data'
});

All you need to do is remove Content-Type from the header, like this:

 let headers = new Headers({
       'Authorization': 'Bearer ' + this.token,
    });