Send FormData with other field in AngularJS

Question

I have a form with two input text and one upload  I have to send it to the server but I have some problem concatenating the file with the text  The server expects this answer    title first input   text second input   file my file pdf    This is the html    lt input type  text  ng-model  title  gt   lt input type  text  ng-model  text  gt   lt input type  file  file-model  myFile   gt   lt button ng-click  send    gt    This is the Controller    scope title   null   scope text   null    scope send   function      var file    scope myFile    var uploadUrl    my url     blockUI start      Add uploadFileToUrl file   scope newPost title   scope newPost text  uploadUrl        This is the Directive fileModel     return   restrict   A   link  function scope  element  attrs      var model    parse attrs fileModel     var modelSetter   model assign     element bind  change   function        scope  apply function          modelSetter scope  element 0  files 0                         And this is the Service which call the server     this uploadFileToUrl   function file  title  text  uploadUrl      var fd   new FormData       fd append  file   file      var obj          title  title       text  text       file  fd          var newObj   JSON stringify obj          http post uploadUrl  newObj           transformRequest  angular identity         headers    Content-Type    multipart form-data              success function        blockUI stop            error function error       toaster pop  error    Errore   error             If I try to send  I get Error 400  and the response is  Multipart form parse error - Invalid boundary in multipart  None  The Payload of Request is    title   sadf   text   sdfsadf   file

User · Accepted Answer

Don t serialize FormData with POSTing to server   Do this   this uploadFileToUrl   function file  title  text  uploadUrl       var payload   new FormData         payload append  title   title       payload append  text   text       payload append  file   file        return  http           url  uploadUrl          method   POST           data  payload            assign content-type as undefined  the browser           will assign the correct boundary for us         headers     Content-Type   undefined             prevents serializing payload   don t do it          transformRequest  angular identity             Then use it   MyService uploadFileToUrl file  title  text  uploadUrl  then successCallback  catch errorCallback

User · Answer

Assume that we want to get a list of certain images from a PHP server using the POST method  You have to provide two parameters in the form for the POST method  Here is how you are going to do  app controller  gallery-item   function   scope   http         var url    service php         var data   new FormData         data append  quot function quot    getImageList        data append  dir    all          http post url  data            transformRequest  angular identity          headers    Content-Type   undefined           then function  response                  This function handles success         console log  angular    response           function  response                this function handles error               I have tested it on my system and it works

User · Answer

You re sending JSON-formatted data to a server which isn t expecting that format   You already provided the format that the server needs  so you ll need to format it yourself which is pretty simple   var data     title   title     text   text     file   file       http post uploadUrl  data

User · Answer

Using  resource in AngularJS you can do   task service js   ngTask factory   taskService           resource       function   resource            var taskModelUrl    api task            return               rest                    taskUpload   resource taskModelUrl                        id    id                                           save                            method   POST                           isArray  false                          headers    Content-Type   undefined                           transformRequest  angular identity                                                                               And then use it in a module   task module js   ngModelTask controller  taskController           scope         taskService       function            scope           taskService               scope saveTask   function  name  file            var newTask              payload   new FormData            payload append  name   name           payload append  file   file           newTask    taskService rest taskUpload save payload              check if exists

User · Answer

Here is the complete solution     html code    create the text anf file upload fields as shown below       lt div class  form-group  gt           lt div gt               lt label for  usr  gt User Name  lt  label gt               lt input type  text  id  usr  ng-model  model username  gt           lt  div gt           lt div gt               lt label for  pwd  gt Password  lt  label gt               lt input type  password  id  pwd  ng-model  model password  gt           lt  div gt  lt hr gt           lt div gt               lt div class  col-lg-6  gt                   lt input type  file  file-model  model somefile   gt               lt  div gt             lt  div gt           lt div gt               lt label for  dob  gt Dob  lt  label gt               lt input type  date  id  dob  ng-model  model dob  gt           lt  div gt           lt div gt               lt label for  email  gt Email  lt  label gt               lt input type  email id  email  ng-model  model email  gt           lt  div gt             lt button type  submit  ng-click  saveData model    gt Submit lt  button gt         directive code   create a filemodel directive to parse file   directive  fileModel      parse   function   parse    return       restrict   A       link  function scope  element  attrs            var model    parse attrs fileModel           var modelSetter   model assign           element bind  change   function                scope  apply function                    modelSetter scope  element 0  files 0                                                  Service code   append the file and fields to form data and do  http post as shown below remember to keep  Content-Type   undefined     service  fileUploadService      http   function   http        this uploadFileToUrl   function file  username  password  dob  email  uploadUrl           var myFormData   new FormData             myFormData append  file   file           myFormData append  username   username           myFormData append  password   password           myFormData append  dob   dob           myFormData append  email   email              http post uploadUrl  myFormData                transformRequest  angular identity              headers    Content-Type   undefined                          success function                                 error function                                    In controller   Now in controller  call the service by sending required data to be appended in parameters    scope saveData    function model       var file   model myFile      var uploadUrl     api createUsers       fileUpload uploadFileToUrl file  model username  model password  model dob  model email  uploadUrl

User · Answer

This never gonna work  you can t stringify your FormData object   You should do this   this uploadFileToUrl   function file  title  text  uploadUrl      var fd   new FormData       fd append  title   title      fd append  text   text      fd append  file   file          http post uploadUrl  obj           transformRequest  angular identity         headers    Content-Type   undefined             success function        blockUI stop            error function error       toaster pop  error    Errore   error

[angularjs] Send FormData with other field in AngularJS

Examples related to angularjs

Examples related to http

Examples related to http-post

Examples related to multipartform-data

Examples related to form-data