Send multipart form-data files with angular using http

Question

I know there are a lot of questions about this  but I can t get this to work   I want to upload a file from input to a server in multipart form-data  I ve tried two approaches  First   headers       Content-Type   undefined      Which results in e g  for an image  Content-Type image png   while it should be multipart form-data  and the other    headers       Content-Type   multipart form-data      But this asks for a boundry header  which I believe should not be manually inserted      What is a clean way to solve this problem   I ve read that you can do    httpProvider defaults headers post  Content-Type      multipart form-data  charset utf-8     But I don t want all my posts to be multipart form-data  The default should be JSON

User · Answer

In angular 9  Before  tried  Content-Type   undefined  but it is not worked for me then I tried the below  code  and It works like charms for a file object const request   this http post url  data          headers             Content-Type    file

User · Answer

Here s an updated answer for Angular 4  amp  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 lt any gt         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   gt        formData append key  restObj key                Send it    return this httpClient post uploadUrl  formData  options       toPromise        catch  e    gt             handle me             Angular 4 Solution      Note that these imports below are deprecated in Angular 5 import  Http  RequestOptions  from   angular http    uploadFileToUrl files  restObj  uploadUrl   Promise lt any gt         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   gt        formData append key  restObj key                Send it    return this http post uploadUrl  formData  options       toPromise        catch  e    gt             handle me

User · Answer

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    gt  resp          In component ts file  in any function say xyz   xyz    this Your service alias function name data  subscribe d   gt          data  can be your file or image in base64 or other encoding       console log d

User · Answer

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

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

Examples related to angularjs

Examples related to http

Examples related to file-upload

Examples related to http-headers

Examples related to multipartform-data