How to convert JSON to FormData for better file uploading using Ajax

If we need to allow file uploading using the axios based forms, you will need to use formData instead of sending plain JSON through form Requests.

So I have created a function to convert your JSON into FormData which can be helpful to you.

  convertJsonToFormData(data) {
    const formData = new FormData()
    const entries = Object.entries(data) // returns array of object property as [key, value]
    // https://medium.com/front-end-weekly/3-things-you-didnt-know-about-the-foreach-loop-in-js-ff02cec465b1

    for (let i = 0; i < entries.length; i++) {
      // don't try to be smart by replacing it with entries.each, it has drawbacks
      const arKey = entries[i][0]
      let arVal = entries[i][1]
      if (typeof arVal === 'boolean') {
        arVal = arVal === true ? 1 : 0
      }
      if (Array.isArray(arVal)) {
        console.log('displaying arKey')
        console.log(arKey)
        console.log('displaying arval')
        console.log(arVal)

        if (this.isFile(arVal[0])) {
          for (let z = 0; z < arVal.length; z++) {
            formData.append(`${arKey}[]`, arVal[z])
          }

          continue // we don't need to append current element now, as its elements already appended
        } else if (arVal[0] instanceof Object) {
          for (let j = 0; j < arVal.length; j++) {
            if (arVal[j] instanceof Object) {
              // if first element is not file, we know its not files array
              for (const prop in arVal[j]) {
                if (Object.prototype.hasOwnProperty.call(arVal[j], prop)) {
                  // do stuff
                  if (!isNaN(Date.parse(arVal[j][prop]))) {
                    // console.log('Valid Date \n')
                    // (new Date(fromDate)).toUTCString()
                    formData.append(
                      `${arKey}[${j}][${prop}]`,
                      new Date(arVal[j][prop])
                    )
                  } else {
                    formData.append(`${arKey}[${j}][${prop}]`, arVal[j][prop])
                  }
                }
              }
            }
          }
          continue // we don't need to append current element now, as its elements already appended
        } else {
          arVal = JSON.stringify(arVal)
        }
      }

      if (arVal === null) {
        continue
      }
      formData.append(arKey, arVal)
    }
    return formData
  },

It can handle many data types and convert them into formData compatible format. click like to appreciate my effort

Comments

[drazik]

Nice. In a recent project I used object-to-formdata to achieve this. It is very handy.

[Lakh Bawa]

nice, adding a dependency for every little stuff does not appeal too much to me though