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

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;
}