Send multipart/form-data files with angular using $http

Take a look at the FormData object:https://developer.mozilla.org/en/docs/Web/API/FormData

this.uploadFileToUrl = function(file, uploadUrl){        var fd = new FormData();        fd.append('file', file);        $http.post(uploadUrl, fd, {            transformRequest: angular.identity,            headers: {'Content-Type': undefined}        })        .success(function(){        })        .error(function(){        });    }

Here's an updated answer for Angular 4 & 5. TransformRequest and angular.identity were dropped. I've also included the ability to combine files with JSON data in one request.

Angular 5 Solution:

import {HttpClient} from '@angular/common/http';uploadFileToUrl(files, restObj, uploadUrl): Promise<any> {  // Note that setting a content-type header  // for mutlipart forms breaks some built in  // request parsers like multer in express.  const options = {} as any; // Set any options you like  const formData = new FormData();  // Append files to the virtual form.  for (const file of files) {    formData.append(file.name, file)  }  // Optional, append other kev:val rest data to the form.  Object.keys(restObj).forEach(key => {    formData.append(key, restObj[key]);  });  // Send it.  return this.httpClient.post(uploadUrl, formData, options)    .toPromise()    .catch((e) => {      // handle me    });}

Angular 4 Solution:

// Note that these imports below are deprecated in Angular 5import {Http, RequestOptions} from '@angular/http';uploadFileToUrl(files, restObj, uploadUrl): Promise<any> {  // Note that setting a content-type header  // for mutlipart forms breaks some built in  // request parsers like multer in express.  const options = new RequestOptions();  const formData = new FormData();  // Append files to the virtual form.  for (const file of files) {    formData.append(file.name, file)  }  // Optional, append other kev:val rest data to the form.  Object.keys(restObj).forEach(key => {    formData.append(key, restObj[key]);  });  // Send it.  return this.http.post(uploadUrl, formData, options)    .toPromise()    .catch((e) => {      // handle me    });}

In Angular 6, you can do this:

In your service file:

 function_name(data) {    const url = `the_URL`;    let input = new FormData();    input.append('url', data);   // "url" as the key and "data" as value    return this.http.post(url, input).pipe(map((resp: any) => resp));  }

In component.ts file:in any function say xyz,

xyz(){this.Your_service_alias.function_name(data).subscribe(d => {   // "data" can be your file or image in base64 or other encoding      console.log(d);    });}