CODEWITHSUNDEEP
javascriptajaxjavascript-objectsform-data
nuxt-user
nuxt-user

Reputation: 33

How to send nested object with array of objects including files in FormData?

I have a nested object in which some values are arrays of objects. These objects have one field as a File. Here's the object structure.

{
  "shop_name":"Organic Farm Shop",
  "shop_logo": File,
  "description":"Lorem ipsum dolor sit amet consectetur adipisicing elit. ",
  "category":"Grocery",
  "shop_url":"organic-farm",
  "product_details":[
    {
      "product_name":"Fresh Carrots",
      "product_image": File,
      "price":45,
      "stock":10,
      "unit":"Kg",
      "catogoryName":"Frozen Foodss"
    },
    {
      "product_name":"Fresh Cucumbers",
      "product_image": File,
      "price":80,
      "stock":20,
      "unit":"Kg",
      "catogoryName":"Frozen Foodss"
    }
  ],
  "page_input":[
    {
      "inputLabel":"Address",
      "inputType":"multiline_text"
    },
    {
      "inputLabel":"Mobile Number",
      "inputType":"numbers"
    }
  ]
}

How do I append this to FormData? Or is there a better way to do this without using FormData?

Upvotes: 2

Views: 1544

Answers (1)

Felipe Candal Campos
Felipe Candal Campos

Reputation: 173

You should first stringify it:

var expressiveObjectVariableName = JSON.stringify(expressiveObjectName);

And then normally append it.

form.append('expressiveFieldName', expressiveObjectVariableName );

More info

Edit:

For nested objects, arrays and Files, the problem described, try this:

JavaScript version

function toFormData(obj, form, namespace) {
    let fd = form || new FormData();
    let formKey;
  
  for(let property in obj) {
    if(obj.hasOwnProperty(property) && obj[property]) {
      if (namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }
     
      // if the property is an object, but not a File, use recursivity.
      if (obj[property] instanceof Date) {
        fd.append(formKey, obj[property].toISOString());
      }
      else if (typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        toFormData(obj[property], fd, formKey);
      } else { // if it's a string or a File object
        fd.append(formKey, obj[property]);
      }
    }
  }
  
  return fd;
}

TypeScript version

function createFormData(object: Object, form?: FormData, namespace?: string): FormData {
    const formData = form || new FormData();
    for (let property in object) {
        if (!object.hasOwnProperty(property) || !object[property]) {
            continue;
        }
        const formKey = namespace ? `${namespace}[${property}]` : property;
        if (object[property] instanceof Date) {
            formData.append(formKey, object[property].toISOString());
        } else if (typeof object[property] === 'object' && !(object[property] instanceof File)) {
            createFormData(object[property], formData, formKey);
        } else {
            formData.append(formKey, object[property]);
        }
    }
    return formData;
}

Upvotes: 2

Related Questions