Posting Form Data (Multi-part) to an API in JavaScript

async function postFormData(url, formElement) {
  try {
    const formData = new FormData(formElement);
    // If you need to add extra data not in the form:
    // formData.append('customField', 'someValue');

    const response = await fetch(url, {
      method: 'POST',
      body: formData, // fetch API automatically sets 'Content-Type': 'multipart/form-data'
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    return result;
  } catch (error)
  {
    console.error("Failed to post form data:", error);
    throw error;
  }
}

// Example Usage (assuming you have an HTML form like <form id="my-form">...</form>):
/*
document.addEventListener('DOMContentLoaded', () => {
  const myForm = document.getElementById('my-form');
  if (myForm) {
    myForm.addEventListener('submit', async (event) => {
      event.preventDefault(); // Prevent default form submission
      try {
        const result = await postFormData('/api/upload', myForm);
        console.log('Upload successful:', result);
        alert('Form submitted successfully!');
      } catch (error) {
        console.error('Submission failed:', error);
        alert('Error submitting form.');
      }
    });
  }
});
*/