How can I convert a JavaScript object to a FormData object?
Gable E

To convert a JavaScript object to a FormData object, you can follow these steps: 1. Create a new FormData object:

1
2
3

   const formData = new FormData();

2. Iterate over the properties of the object using a loop, such as afor...in loop orObject.entries():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

   for (const key in object) {
     if (object.hasOwnProperty(key)) {
       const value = object[key];

       // Check if the value is a File or Blob object
       if (value instanceof File || value instanceof Blob) {
         // Append the file/blob to the FormData object with the key
         formData.append(key, value, value.name);
       } else {
         // Append non-file values to the FormData object
         formData.append(key, value);
       }
     }
   }

Alternatively, you can useObject.entries() to iterate over the object:

1
2
3
4
5
6

   for (const [key, value] of Object.entries(object)) {
     // Append the key-value pair to the FormData object
     formData.append(key, value);
   }

This loop iterates over each property of the object and appends it to the FormData object using theappend() method. If the value is a File or Blob object, it is appended with its filename. 3. TheformData object now contains the key-value pairs from the original JavaScript object. You can use it in an AJAX request or perform other operations that require FormData. Here's an example that converts an object to a FormData object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function objectToFormData(object) {
  const formData = new FormData();

  for (const key in object) {
    if (object.hasOwnProperty(key)) {
      const value = object[key];

      if (value instanceof File || value instanceof Blob) {
        formData.append(key, value, value.name);
      } else {
        formData.append(key, value);
      }
    }
  }

  return formData;
}

// Usage example
const myObject = {
  name: 'John Doe',
  age: 30,
  avatar: fileInput.files[0],
};

const formData = objectToFormData(myObject);
// Use the formData object in an AJAX request or perform other operations

By following these steps, you can convert a JavaScript object to a FormData object, including support for File and Blob objects.

Similar Questions