Convert JS Object to form data

Question

How can I can convert my JS Object to FormData   The reason why I want to do this is  I have an object that I constructed out of the  100 form field values    var item        description   Some Item      price    0 00      srate    0 00      color    red                     Now I am asked to add the upload file functionality to my form which  of-course is impossible via JSON and so I am planning on moving to FormData  So is there any way that I can convert my JS object to FormData

User · Answer

Here is a short and sweet solution using Object.entries() that will take care of even your nested objects.

// If this is the object you want to convert to FormData...
const item = {
    description: 'First item',
    price: 13,
    photo: File
};

const formData = new FormData();

Object.entries(item).forEach(([key, value]) => {
    formData.append(key, value);
});

// At this point, you can then pass formData to your handler method

Read more about Object.entries() over here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

User · Answer

Try obj2fd    https   www npmjs com package obj2fd  import obj2fd from  obj2fd   let data    a 1  b 2  c  ca 1    let dataWithFormData   obj2fd data     result   gt   a  gt 1  b  gt 2  c  gt  ca  gt 1

User · Answer

Recursively   x000D   x000D  const toFormData    f   gt  f f   h   gt  f   gt  f x   gt  h h  f  x    f   gt  fd   gt  pk   gt  d   gt    x000D    if  d instanceof Object    x000D      Object keys d  forEach k   gt    x000D        const v   d k  x000D        if  pk  k      pk    k    x000D        if  v instanceof Object  amp  amp    v instanceof Date   amp  amp    v instanceof File     x000D          return f fd  k  v  x000D          else   x000D          fd append k  v  x000D          x000D         x000D      x000D    return fd x000D     new FormData      x000D   x000D  let data     x000D    name   John   x000D    age  30  x000D    colors    red    green    blue    x000D    children    x000D        name   Max   age  3    x000D        name   Madonna   age  10   x000D      x000D    x000D  console log  data   data  x000D  document getElementById  data   insertAdjacentHTML  beforeend   JSON stringify data   x000D   x000D  let formData   toFormData data  x000D   x000D  for  let key of formData keys      x000D    console log key  formData getAll key  join       x000D    document getElementById  item   insertAdjacentHTML  beforeend     lt li gt   key      formData getAll key  join       lt  li gt    x000D    x000D   lt p id  data  gt  lt  p gt  x000D   lt ul id  item  gt  lt  ul gt  x000D   x000D   x000D

User · Answer

I might be a little late to the party but this is what I ve created to convert a singular object to FormData   function formData formData  filesIgnore           let data   new FormData       let files   filesIgnore     Object entries formData  forEach   key  value     gt        if  typeof value      object   amp  amp   files includes key           data append key  JSON stringify value     null         else if  files includes key           data append key  value 0     null         else         data append key  value    null                 return data      How does it work  It will convert and return all properties expect File objects that you ve set in the ignore list  2nd argument  If anyone could tell me a better way to determine this that would help   into a json string using JSON stringify  Then on your server you ll just need to convert it back into a JSON object   Example   let form       first name   John     last name   Doe     details        phone number  1234 5678 910      address   123 Some Street          profile picture   object FileList     set by your form file input  Currently only support 1 file per property     function submit       let data   formData form    profile picture        axios post   url   data  then res   gt        console log  object uploaded             I am still kinda new to Http requests and JavaScript so any feedback would be highly appreciated

User · Answer

Try JSON stringify function as below  var postData   JSON stringify item   var formData   new FormData    formData append  postData  postData

User · Answer

I used this for Post my object data as Form Data   const encodeData   require  querystring     const object    type   Authorization   username   test   password   123456     console log object   console log encodeData stringify object

User · Answer

If you have an object  you can easily create a FormData object and append the names and values from that object to formData   You haven t posted any code  so it s a general example   var form data   new FormData     for   var key in item         form data append key  item key         ajax       url            http   example com upload php       data          form data      processData   false      contentType   false      type   POST     done function data          do stuff       There are more examples in the documentation on MDN

User · Answer

You can simply install qs   npm i qs   Simply import   import qs from  qs    Pass object to qs stringify     var item        description   Some Item      price    0 00      srate    0 00      color    red                    qs stringify item

User · Answer

Handles nested objects and arrays Handles files Type support Tested in Chrome  const buildFormData    formData  FormData  data  FormVal  parentKey   string    gt        if  isArray data             data forEach  el    gt                buildFormData formData  el  parentKey                    else if  typeof data      quot object quot   amp  amp    data instanceof File             Object keys data  forEach  key    gt                buildFormData formData   data as FormDataNest  key   parentKey      parentKey    key     key                    else           if  isNil data                 return                    let value   typeof data      quot boolean quot     typeof data      quot number quot    data toString     data         formData append parentKey as string  value           export const getFormData    data  Record lt string  FormDataNest gt     gt        const formData   new FormData        buildFormData formData  data       return formData    Examples and Tests const data         filePhotos  imageArray     yourAjaxCall              data  getFormData data      Screenshot from Chrome dev tools - Network - Headers   const data         nested            a  1          b    quot hello quot    quot world quot            c                d  2              e    quot hello quot    quot world quot                       yourAjaxCall              data  getFormData data

User · Answer

I reference this from Gudradain s answer  I edit it a little in Typescript format      class UtilityService       private appendFormData formData  data  rootName             let root   rootName                if  data instanceof File                formData append root  data             else if  Array isArray data                 for  var i   0  i  lt  data length  i                      this appendFormData formData  data i   root         i                                 else if  typeof data      object   amp  amp  data                for  var key in data                    if  data hasOwnProperty key                         if  root                                   this appendFormData formData  data key   key                         else                           this appendFormData formData  data key   root         key                                                                   else               if  data     null  amp  amp  typeof data      undefined                     formData append root  data                                      getFormDataFromObj data            var formData   new FormData             this appendFormData formData  data                return formData           export let UtilityMan   new UtilityService

User · Answer

This function adds all data from object to FormData ES6 version from  developer033  function buildFormData formData  data  parentKey      if  data  amp  amp  typeof data      object   amp  amp    data instanceof Date   amp  amp    data instanceof File         Object keys data  forEach key   gt          buildFormData formData  data key   parentKey      parentKey    key      key               else       const value   data    null        data       formData append parentKey  value          function jsonToFormData data      const formData   new FormData         buildFormData formData  data        return formData     const my data       num  1    falseBool  false    trueBool  true    empty        und  undefined    nullable  null    date  new Date      name   str     another object        name   my name       value   whatever         array                key1            name   key1                        jsonToFormData my data   jQuery version  function appendFormdata FormData  data  name       name   name            if  typeof data      object              each data  function index  value               if  name                         appendFormdata FormData  value  index                 else                   appendFormdata FormData  value  name       index                                      else           FormData append name  data             var formData   new FormData        your object             name   test object           another object                name   and other objects               value   whatever                   appendFormdata formData  your object

User · Answer

The other answers were incomplete for me  I started from  Vladimir Novopashin answer and modified it  Here are the things  that I needed and bug I found    Support for file Support for array Bug  File inside complex object needs to be added with  prop instead of  prop   For example  formData append  photos 0  file    file  didn t work on google chrome  while formData append  photos 0  file   file  worked Ignore some properties in my object   The following code should work on IE11 and evergreen browsers   function objectToFormData obj  rootName  ignoreList        var formData   new FormData         function appendFormData data  root            if   ignore root                 root   root                    if  data instanceof File                    formData append root  data                 else if  Array isArray data                     for  var i   0  i  lt  data length  i                          appendFormData data i   root         i                                         else if  typeof data      object   amp  amp  data                    for  var key in data                        if  data hasOwnProperty key                             if  root                                       appendFormData data key   key                             else                               appendFormData data key   root         key                                                                                   else                   if  data     null  amp  amp  typeof data      undefined                         formData append root  data                                                        function ignore root           return Array isArray ignoreList               amp  amp  ignoreList some function x    return x     root                 appendFormData obj  rootName        return formData

User · Answer

With ES6 and a more functional programming approach  adeneo s answer could looks like this  function getFormData object        const formData   new FormData        Object keys object  forEach key   gt  formData append key  object key         return formData     And alternatively using  reduce   and arrow-functions  const getFormData   object   gt  Object keys object  reduce  formData  key    gt        formData append key  object key        return formData     new FormData

User · Answer

Sorry for a late answer  but I was struggling with this as Angular 2 currently does not support file upload  So  the way to do it was sending a XMLHttpRequest with FormData  So  I created a function to do it  I m using Typescript  To convert it to Javascript just remove data types declaration              Transforms the json data into form data                Example                Input                 fd   new FormData           dob             name   phone           photos    myphoto jpg    myotherphoto png            price   615 99           color                front   red               back   blue                     buttons    power    volup    voldown            cameras                 name   front               res   5Mpx                          name   back               res   10Mpx                              Say we want to replace  myotherphoto png   We ll have this  fob          fob             photos   null   lt File object gt                    Say we want to wrap the object  Rails way          p    product                 Output                 fd  object updated  Now it will have these key-values   lt key gt    lt value gt                  product name   phone        product photos     myphoto jpg        product photos      lt File object gt         product color  front   red        product color  back   blue        product buttons     power        product buttons     volup        product buttons     voldown        product cameras    name   front        product cameras    res   5Mpx        product cameras    name   back        product cameras    res   10Mpx                 param  FormData   fd  FormData object where items will be appended to          param  Object     dob Data object where items will be read from          param  Object     null  fob File object where items will override dob s          param  string         p Prefix  Useful for wrapping objects and necessary for internal use  as this is a recursive method               append fd  FormData  dob  Object  fob  Object   null  p  string                let apnd   this append           function isObj dob  fob  p               if typeof dob     object                    if   dob  amp  amp  dob constructor     Array                       p                              for let i   0  i  lt  dob length  i                             let aux fob     fob   fob i    fob                          isObj dob i   aux fob  p                                           else                       apnd fd  dob  fob  p                                   else                   let value     fob   fob   dob                  fd append p  value                                    for let prop in dob               let aux p   p         prop      p    prop                 let aux fob     fob   fob prop    fob              isObj dob prop   aux fob  aux p

User · Answer

This method convert a JS object to a FormData     x000D   x000D  function convertToFormData params    x000D      return Object entries params  x000D           reduce  acc   key  value     gt    x000D              if  Array isArray value     x000D                  value forEach  v  k    gt  acc append    key    k     value    x000D                else if  typeof value      object   amp  amp    value instanceof File   amp  amp    value instanceof Date     x000D                  Object entries value  forEach  v  k    gt  acc append    key    k     value    x000D                else   x000D                  acc append key  value   x000D                x000D   x000D              return acc  x000D             new FormData     x000D    x000D   x000D   x000D

User · Answer

Maybe you re looking for this  a code that receive your javascript object  create a FormData object from it and then POST it to your server using new Fetch API       let myJsObj     someIndex    a value         let datos   new FormData        for  let i in myJsObj           datos append  i  myJsObj i                fetch  your php             method   POST           body  datos        then response   gt  response json             then objson   gt                console log  Success    objson                       catch  error    gt                console error  Error    error

User · Answer

In my case my object also had property which was array of files  Since they are binary they should be dealt differently - index doesn t need to be part of the key  So i modified  Vladimir Novopashin s and   developer033 s answer   export function convertToFormData data  formData  parentKey      if data     null    data     undefined  return null     formData   formData    new FormData       if  typeof data      object   amp  amp    data instanceof Date   amp  amp    data instanceof File         Object keys data  forEach key   gt         convertToFormData data key   formData    parentKey   key    data key  instanceof File   parentKey      parentKey    key                  else       formData append parentKey  data          return formData

User · Answer

You can simply use  formData append  item   JSON stringify item

User · Answer

I had a scenario where nested JSON had to be serialised in a linear fashion while form data is constructed  since this is how server expects values  So  I wrote a small recursive function which translates the JSON which is like this         orderPrice   11       cardNumber               1234       id   8796191359018       accountHolderName   Raj Pawan       expiryMonth   02       expiryYear   2019       issueNumber  null      billingAddress           city   Wonderland          code   8796682911767          firstname   Raj Pawan          lastname   Gumdal          line1   Addr Line 1          line2  null         state   US-AS          region              isocode   US-AS                  zip   76767-6776           Into something like this         orderPrice   11       cardNumber               1234       id   8796191359018       accountHolderName   Raj Pawan       expiryMonth   02       expiryYear   2019       issueNumber  null      billingAddress city   Wonderland       billingAddress code   8796682911767       billingAddress firstname   Raj Pawan       billingAddress lastname   Gumdal       billingAddress line1   Addr Line 1       billingAddress line2  null      billingAddress state   US-AS       billingAddress region isocode   US-AS       billingAddress zip   76767-6776      The server would accept form data which is in this converted format   Here is the function   function jsonToFormData  inJSON  inTestJSON  inFormData  parentKey           http   stackoverflow com a 22783314 260665        Raj  Converts any nested JSON to formData      var form data   inFormData    new FormData        var testJSON   inTestJSON            for   var key in inJSON                1  If it is a recursion  then key has to be constructed like  parent child  where parent JSON contains a child JSON            2  Perform append data only if the value for key is not a JSON  recurse otherwise          var constructedKey   key          if  parentKey                constructedKey   parentKey         key                     var value   inJSON key           if  value  amp  amp  value constructor        constructor                   This is a JSON  we now need to recurse              jsonToFormData  value  testJSON  form data  constructedKey             else               form data append constructedKey  inJSON key                testJSON constructedKey    inJSON key                       return form data      Invocation           var testJSON               var form data   jsonToFormData  jsonForPost  testJSON     I am using testJSON just to see the converted results since I would not be able to extract the contents of form data  AJAX post call             ajax               type   POST               url  somePostURL              data  form data              processData   false              contentType   false              success  function  data                               error  function  e

[javascript] Convert JS Object to form data

Examples related to javascript

Examples related to jquery

Examples related to multipartform-data

Examples related to form-data