Angularjs how to upload multipart form data and a file

Question

I m a beginner to angular js but I have a good grasp of the basics   What I am looking to do is upload a file and some form data as multipart form data  I read that this isn t a feature of angular  however 3rd party libraries can get this done  I ve cloned angular-file-upload via git  however I am still unable to post a simple form and a file   Can someone please provide an example  html and js of how to do this

User · Accepted Answer

First of all    You don t need any special changes in the structure  I mean  html input tags     x000D   x000D   lt input accept  image    name  file  ng-value  fileToUpload  x000D         value    fileToUpload    file-model  fileToUpload  x000D         set-file-data  fileToUpload   value    x000D         type  file  id  my file    gt  x000D   x000D   x000D    1 2 create own directive    x000D   x000D   directive  fileModel  function     x000D   return   x000D    restrict   EA   x000D    scope    x000D     setFileData    amp   x000D       x000D    link  function scope  ele  attrs    x000D     ele on  change   function     x000D      scope  apply function     x000D       var val   ele 0  files 0   x000D       scope setFileData   value  val     x000D          x000D         x000D      x000D     x000D     x000D   x000D   x000D     In module with  httpProvider add dependency like   Accept  Content-Type etc  with multipart form-data   Suggestion would be  accept response in json format  For e g        httpProvider defaults headers post  Accept      application json  text javascript          httpProvider defaults headers post  Content-Type      multipart form-data  charset utf-8      Then create separate function in controller to handle form submit call  like for e g below code  In service function handle  responseType  param purposely so that server should not throw  byteerror    transformRequest  to modify request format with attached identity  withCredentials   false  for HTTP authentication information     x000D   x000D  in controller  x000D   x000D       code this accordingly  so that your file object  x000D       will be picked up in service call below  x000D    fileUpload uploadFileToUrl file    x000D   x000D   x000D  in service  x000D   x000D     service  fileUpload      http    ajaxService   x000D      function  http  ajaxService    x000D   x000D        this uploadFileToUrl   function data    x000D          var data         file object  x000D   x000D          var fd   new FormData    x000D          fd append  file   data file   x000D   x000D           http post  endpoint server path to whom sending file   fd    x000D              withCredentials  false  x000D              headers    x000D                 Content-Type   undefined x000D                 x000D              transformRequest  angular identity  x000D              params    x000D                fd x000D                 x000D              responseType   arraybuffer  x000D               x000D             then function response    x000D              var data   response data  x000D              var status   response status  x000D              console log data   x000D   x000D              if  status    200    status    202    do whatever in success x000D              else    handle error in  else if needed  x000D               x000D             catch function error    x000D              console log error status   x000D   x000D                 handle else calls x000D                x000D          x000D        x000D        x000D   lt script src    unpkg com angular angular js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can check out this method for sending image and form data altogether   lt div class  form-group ml-5 mt-4  ng-app  myApp  ng-controller  myCtrl  gt                       lt label for  image name  gt Image Name  lt  label gt                       lt input type  text    placeholder  Image name  ng-model  fileName  class  form-control  required gt                       lt br gt                        lt br gt                       lt input id  file src  type  file    accept  image jpeg  file-input  files     gt                       lt br gt                            file name                lt img class  rounded mt-2 mb-2   id  prvw img  width  150  height  100   gt                       lt hr gt                         lt button class  btn btn-info  ng-click  uploadFile    gt Upload lt  button gt                           lt br gt                           lt div ng-show    IsVisible  class  alert alert-info w-100 shadow mt-2  role  alert  gt                 lt strong gt    response msg    lt  strong gt               lt  div gt                               lt div class  alert alert-danger   id  filealert  gt   lt strong gt  File Size should be less than 4 MB  lt  strong gt  lt  div gt                       lt  div gt    Angular JS Code      var app   angular module  myApp         app directive  fileInput   function  parse         return             link  function  scope  element  attrs                   element on  change   function event                        var files   event target files                          parse attrs fileInput  assign  scope  element 0  files                         scope  apply                                                   app controller  myCtrl   function  scope   http          scope IsVisible   false         scope uploadFile   function               var form data   new FormData               angular forEach  scope files  function file                   form data append  file   file     form file                                 form data append  file Name   scope fileName     form text data                            http post  upload php   form data                                  file Name   scope file name                  transformRequest  angular identity                  headers    Content-Type   undefined  Process-Data   false                success function response                 scope IsVisible    scope IsVisible   true                         scope response msg response                    alert response                      scope select

User · Answer

It is more efficient to send the files directly  The base64 encoding of Content-Type  multipart form-data adds an extra 33  overhead  If the server supports it  it is more efficient to send the files directly  Doing Multiple  http post Requests Directly from a FileList  scope upload   function url  fileList        var config           headers     Content-Type   undefined          transformResponse  angular identity            var promises   fileList map function file          return  http post url  file  config               return  q all promises       When sending a POST with a File object  it is important to set  Content-Type   undefined  The XHR send method will then detect the File object and automatically set the content type   Working Demo of  quot select-ng-files quot  Directive that Works with ng-model1 The  lt input type file gt  element does not by default work with the ng-model directive  It needs a custom directive   x000D   x000D  angular module  app        angular module  app   directive  selectNgFiles   function       return       require   ngModel       link  function postLink scope elem attrs ngModel          elem on  change   function e            var files   elem 0  files          ngModel  setViewValue files                          x000D   lt script src    unpkg com angular angular js  gt  lt  script gt     lt body ng-app  app  gt       lt h1 gt AngularJS Input  type file  Demo lt  h1 gt            lt input type  file  select-ng-files ng-model  fileList  multiple gt            lt h2 gt Files lt  h2 gt       lt div ng-repeat  file in fileList  gt          file name        lt  div gt     lt  body gt  x000D   x000D   x000D

User · Answer

This is pretty must just a copy of that projects demo page and shows uploading a single file on form submit with upload progress    function  angular     use strict    angular module  uploadModule            controller  uploadCtrl               scope             upload           function   scope   upload                 scope model                    scope selectedFile                    scope uploadProgress   0                scope uploadFile   function                      var file    scope selectedFile 0                    scope upload    upload upload                       url   api upload                       method   POST                       data  angular toJson  scope model                       file  file                    progress function  evt                         scope uploadProgress   parseInt 100 0   evt loaded   evt total  10                      success function  data                          do something                                                  scope onFileSelect   function   files                     scope uploadProgress   0                   scope selectedFile    files                                       directive  progressBar             function                  return                   link  function   scope  el  attrs                         scope  watch attrs progressBar  function  newValue                            el css  width   newValue toString                                                                                         angular      HTML   lt form ng-submit  uploadFile    gt      lt div class  row  gt            lt div class  col-md-12  gt                     lt input type  text  ng-model  model fileDescription    gt                     lt input type  number  ng-model  model rating    gt                     lt input type  checkbox  ng-model  model isAGoodFile    gt                     lt input type  file  ng-file-select  onFileSelect  files   gt                     lt div class  progress  style  margin-top  20px   gt                       lt div class  progress-bar  progress-bar  uploadProgress  role  progressbar  gt                         lt span ng-bind  uploadProgress  gt  lt  span gt                         lt span gt   lt  span gt                       lt  div gt                     lt  div gt                      lt button button type  submit  class  btn btn-default btn-lg  gt                       lt i class  fa fa-cloud-upload  gt  lt  i gt                       amp nbsp                       lt span gt Upload File lt  span gt                     lt  button gt                   lt  div gt                 lt  div gt               lt  form gt    EDIT  Added passing a model up to the server in the file post   The form data in the input elements would be sent in the data property of the post and be available as normal form values

[javascript] Angularjs how to upload multipart form data and a file?

Examples related to javascript

Examples related to forms

Examples related to angularjs

Examples related to post

Examples related to multipartform-data