64

I'm using Angular, TypeScript to send a file, along with JSON Data to a server.

Below is my code:

import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2';
import {Http, Response, Headers} from 'http/http';


@Component({ selector: 'file-upload' })
@View({
directives: [FORM_DIRECTIVES],
template: `
<h3>File Upload</h3>

<div>
     Select file:
    <input type="file" (change)="changeListener($event)">
</div>

`
})
export class FileUploadCmp {

public file: File;
public url: string;
headers: Headers;


constructor(public http: Http) {
    console.log('file upload Initialized');
    //set the header as multipart        
    this.headers = new Headers();
    this.headers.set('Content-Type', 'multipart/form-data');
    this.url = 'http://localhost:8080/test';
}

//onChange file listener
changeListener($event): void {
    this.postFile($event.target);
}

//send post file to server 
postFile(inputValue: any): void {

    var formData = new FormData();
    formData.append("name", "Name");
    formData.append("file",  inputValue.files[0]);

    this.http.post(this.url +,
      formData ,
        {
            headers: this.headers

        });
}

}

How can I transform the formData to String and send it to the server? I remember in AngularJS (v1) you would use transformRequest.

Improve this question
4
  • can't the data be transformed before this.http.post line ? http is an observable and takes options, try to search the source you might find an example, github.com/angular/angular/blob/… Commented Sep 7, 2015 at 9:35
  • Did you had any progress on this? Commented Sep 16, 2015 at 18:42
  • There's a pending feature request on GitHub github.com/angular/angular/issues/2803 Commented Sep 25, 2015 at 11:08
  • See here, I solved it after a long time fighting 2017.8.25, stackoverflow.com/a/45879409/2803344 Commented Aug 25, 2017 at 10:41

5 Answers 5

Reset to default
45

Look at my code, but be aware. I use async/await, because latest Chrome beta can read any es6 code, which gets by TypeScript with compilation. So, you must replace asyns/await by .then().

Input change handler:

/**
 * @param fileInput
 */
public psdTemplateSelectionHandler (fileInput: any){
    let FileList: FileList = fileInput.target.files;

    for (let i = 0, length = FileList.length; i < length; i++) {
        this.psdTemplates.push(FileList.item(i));
    }

    this.progressBarVisibility = true;
}

Submit handler: 

public async psdTemplateUploadHandler (): Promise<any> {
    let result: any;

    if (!this.psdTemplates.length) {
        return;
    }

    this.isSubmitted = true;

    this.fileUploadService.getObserver()
        .subscribe(progress => {
            this.uploadProgress = progress;
        });

    try {
        result = await this.fileUploadService.upload(this.uploadRoute, this.psdTemplates);
    } catch (error) {
        document.write(error)
    }

    if (!result['images']) {
        return;
    }

    this.saveUploadedTemplatesData(result['images']);
    this.redirectService.redirect(this.redirectRoute);
}

FileUploadService. That service also stored uploading progress in progress$ property, and in other places, you can subscribe on it and get new value every 500ms.

import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';

@Injectable()
export class FileUploadService {
/**
 * @param Observable<number>
 */
private progress$: Observable<number>;

/**
 * @type {number}
 */
private progress: number = 0;

private progressObserver: any;

constructor () {
    this.progress$ = new Observable(observer => {
        this.progressObserver = observer
    });
}

/**
 * @returns {Observable<number>}
 */
public getObserver (): Observable<number> {
    return this.progress$;
}

/**
 * Upload files through XMLHttpRequest
 *
 * @param url
 * @param files
 * @returns {Promise<T>}
 */
public upload (url: string, files: File[]): Promise<any> {
    return new Promise((resolve, reject) => {
        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) {
                    resolve(JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        FileUploadService.setUploadUpdateInterval(500);

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

/**
 * Set interval for frequency with which Observable inside Promise will share data with subscribers.
 *
 * @param interval
 */
private static setUploadUpdateInterval (interval: number): void {
    setInterval(() => {}, interval);
}
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I also needed to add: xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); for it to work
@patad: do you have problem with it? When I upload xml file, it will automatically add ' ------WebKitFormBoundaryklb8qUzyCQJSI440 Content-Disposition: form-data; name="file" ' inside my file. I don't want to add extra data to file during transmission, do you know how to do with that? And for upload image like jpg, after uploaded, it was no longer a jpg file. So my question is: how to keep the original file during transmission?
Why do we need the setInterval() thing?
24

Looking onto this issue Github - Request/Upload progress handling via @angular/http, angular2 http does not support file upload yet.

For very basic file upload I created such service function as a workaround (using Тимофей's answer):

  uploadFile(file:File):Promise<MyEntity> {
    return new Promise((resolve, reject) => {

        let xhr:XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(<MyEntity>JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        xhr.open('POST', this.getServiceUrl(), true);

        let formData = new FormData();
        formData.append("file", file, file.name);
        xhr.send(formData);
    });
}
Improve this answer

8 Comments

Great! For it to work I however needed to add xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');.
Thanks! If authorization is required adding this after the xhr.open line worked for me: xhr.setRequestHeader('Authorization', 'Bearer ' + __your_auth_key__);
Is this supported now?
@ManishJain check out the issue status github.com/angular/http/issues/75 So far it is open.
@AndreyKarayvansky, is there an updated link? I'm getting a 404 page and struggling to find the relevant issue.
|
13

your http service file:

import { Injectable } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import {Observable} from 'rxjs/Rx';
import { Constants } from './constants';
declare var $: any;

@Injectable()
export class HttpClient {
  requestUrl: string;
  responseData: any;
  handleError: any;

  constructor(private router: Router, 
  private http: Http, 
  private constants: Constants, 
  ) {
    this.http = http;
  }

  postWithFile (url: string, postData: any, files: File[]) {

    let headers = new Headers();
    let formData:FormData = new FormData();
    formData.append('files', files[0], files[0].name);
    // For multiple files
    // for (let i = 0; i < files.length; i++) {
    //     formData.append(`files[]`, files[i], files[i].name);
    // }

    if(postData !=="" && postData !== undefined && postData !==null){
      for (var property in postData) {
          if (postData.hasOwnProperty(property)) {
              formData.append(property, postData[property]);
          }
      }
    }
    var returnReponse = new Promise((resolve, reject) => {
      this.http.post(this.constants.root_dir + url, formData, {
        headers: headers
      }).subscribe(
          res => {
            this.responseData = res.json();
            resolve(this.responseData);
          },
          error => {
            this.router.navigate(['/login']);
            reject(error);
          }
      );
    });
    return returnReponse;
  }
}

call your function (Component file):

onChange(event) {
    let file = event.srcElement.files;
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {
        console.log(result);
    });
}

your html code:

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">
Improve this answer

4 Comments

One of the only answers that actually uses angular
How can I fix this error TS2339: Property 'files' does not exist on type 'Element'. thanks
onChange() {...} should be onChange(event) {...} will fix the error: property files does not exist ;)
does not work for me. it is unable to find the file on backend node which uses multer.
4

In my project , I use the XMLHttpRequest to send multipart/form-data. I think it will fit you to.

and the uploader code

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/rest/api', true);
xhr.withCredentials = true;
xhr.send(formData);

Here is example : https://github.com/wangzilong/angular2-multipartForm

Improve this answer

1 Comment

Just linking to your own library (or utility) is not a good answer. Linking to it, explaining why it solves the problem, providing code using it to do so and disclaiming makes for a better answer. See: How can I link to an external resource in a community-friendly way?
2

First, you have to create your own inline TS-Class, since the FormData Class is not well supported at the moment:

var data : {
  name: string;
  file: File;
} = {
  name: "Name",
  file: inputValue.files[0]
  };

Then you send it to the Server with JSON.stringify(data)

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethods.Post;
opts.headers = headers;
this.http.post(url,JSON.stringify(data),opts);
Improve this answer

1 Comment

developer.mozilla.org/en-US/docs/Web/API/… Support isn't actually so bad. I would imagine JSON.stringify would have some issues if the uploaded files happen to be binaries or some such thing..

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.