Angularjs http post file and form data

Question

I have the below request in python  import requests  json  io  cookie      payload     Name   abc   url     test  file    out test json   fi     file     file   open file     r   requests post  http   192 168 1 1 8080    url  data payload  files fi  cookies cookie  print r text    which send a file  and form fields to the backend  How can I do the same  sending file   form fields  with Angular  http  Currently  I do like this  but not sure how to send the file too   var payload     Name   abc     http post   test   payload       success function  res          success

User · Answer

I was unable to get Pavel s answer working as in when posting to a Web Api application     The issue appears to be with the deleting of the headers     headersGetter    delete headers  Content-Type      In order to ensure the browsers was allowed to default the Content-Type along with the boundary parameter  I needed to set the Content-Type to undefined  Using Pavel s example the boundary was never being set resulting in a 400 HTTP exception    The key was to remove the code deleting the headers shown above and to set the headers content type to null manually  Thus allowing the browser to set the properties    headers    Content-Type   undefined    Here is a full example     scope Submit   form   gt                     http                       method   POST                       url   api FileTest                       headers    Content-Type   undefined                       data                            FullName   scope FullName                          Email   scope Email                          File1   scope file                                            transformRequest  function  data  headersGetter                            var formData   new FormData                            angular forEach data  function  value  key                                formData append key  value                                                       return formData                                                            success function  data                                         error function  data  status                                          return false

User · Answer

I had similar problem when had to upload file and send user token info at the same time  transformRequest along with forming FormData helped            http               method   POST               url    upload-file               headers                     Content-Type    multipart form-data                             data                    email  Utils getUserInfo   email                  token  Utils getUserInfo   token                  upload   scope file                            transformRequest  function  data  headersGetter                    var formData   new FormData                    angular forEach data  function  value  key                        formData append key  value                                        var headers   headersGetter                    delete headers  Content-Type                     return formData                                    success function  data                         error function  data  status                   For getting file  scope file I used custom directive   app directive  file   function          return           scope                file                         link  function  scope  el  attrs                el bind  change   function  event                    var file   event target files 0                   scope file   file   file   undefined                  scope  apply                                           Html    lt input type  file  file  file  required   gt

User · Answer

Please  have a look on my implementation  You can wrap the following function into a service   function file  url      var fd   new FormData       fd append  file   file      return  http post url  fd        transformRequest  angular identity      headers     Content-Type   undefined             Please notice  that file argument is a Blob  If you have base64 version of a file - it can be easily changed to Blob like so   fetch base64  then function response      return response blob        then console info  catch console error

User · Answer

here is my solution    x000D   x000D     Controller x000D   scope uploadImg   function  files     x000D     scope data avatar   files 0   x000D    x000D   x000D   scope update   function     x000D    var formData   new FormData    x000D    formData append  desc   data desc   x000D    formData append  avatar   data avatar   x000D    SomeService upload  formData    x000D    x000D   x000D   x000D     Service x000D  upload  function  formData     x000D    var deferred    q defer    x000D    var url     upload    x000D     x000D    var request     x000D       url   url  x000D       method    POST   x000D       data   formData  x000D       headers     x000D         Content-Type    undefined    important x000D        x000D       x000D   x000D    console log request   x000D   x000D     http request  success function data   x000D      deferred resolve data   x000D       error function error   x000D      deferred reject error   x000D        x000D    return deferred promise  x000D    x000D   x000D   x000D     backend use express and multer x000D     a part of the code x000D  var multer   require  multer    x000D  var storage   multer diskStorage   x000D    destination  function  req  file  cb    x000D      cb null      public img   x000D       x000D    filename  function  req  file  cb    x000D      cb null  file fieldname    -    Date now       jpg    x000D      x000D     x000D   x000D  var upload   multer   storage  storage    x000D  app post   upload   upload single  avatar    function req  res  next    x000D       do something x000D    console log req body   x000D    res send req body   x000D      x000D   lt div gt  x000D     lt input type  file  accept  image    onchange  angular element  this   scope   uploadImg  this files    gt  x000D     lt textarea ng-model  data desc    gt  x000D     lt button type  button  ng-click  update    gt Update lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In my solution  i have   scope uploadVideo   function        var uploadUrl     api uploadEvent           obj with data  that can be one input or form     file    scope video      var fd   new FormData            check file form on being     for  var obj in file            if  file obj     file obj     0                fd append obj  file obj                           open XHR request     var xhr   new XMLHttpRequest              apply to rendering progress bar for any chunking update     xhr upload onprogress   function event             scope uploadStatus                 loaded  event loaded              total   event total                     scope  apply                xhr onload   xhr onerror   function e            if  this status    200    this status    201                   sucess               scope uploadStatus                     loaded  0                  total   0                                this is for my solution              scope video                    scope vm model push JSON parse e currentTarget response                 scope  apply               else                on else status                       xhr open  POST   uploadUrl  true          token for upload  thit for my solution     xhr setRequestHeader  Authorization    JWT     window localStorage token           send     xhr send fd

User · Answer

I recently wrote a directive that supports native multiple file uploads  The solution I ve created relies on a service to fill the gap you ve identified with the  http service   I ve also included a directive  which provides an easy API for your angular module to use to post the files and data   Example usage    lt lvl-file-upload     auto-upload  false      choose-file-button-text  Choose files      upload-file-button-text  Upload files      upload-url  http   localhost 3000 files      max-files  10      max-file-size-mb  5      get-additional-data  getData files       on-done  done files  data       on-progress  progress percentDone       on-error  error files  type  msg    gt    You can find the code on github  and the documentation on my blog  It would be up to you to process the files in your web framework  but the solution I ve created provides the angular interface to getting the data to your server   The angular code you need to write is to respond to the upload events  angular      module  app     lvl directives fileupload         controller  ctl      scope   function  scope             scope done   function files data      do something when the upload completes               scope progress   function percentDone      do something when progress is reported               scope error   function file  type  msg      do something if an error occurs               scope getAdditionalData   function        return additional data to be posted to the server

User · Answer

You can also upload using HTML5  You can use this AJAX uploader   The JS code is basically      scope doPhotoUpload   function                    var myUploader   new uploader document getElementById  file upload element id    options       myUploader send                    Which reads from an HTML input element   lt input id  file upload element id  type  file  onchange  angular element this  scope   doPhotoUpload    gt

User · Answer

There are other solutions you can look into http   ngmodules org modules ngUpload as discussed here file uploader integration for angularjs

[javascript] Angularjs $http post file and form data

Examples related to javascript

Examples related to angularjs