Upload Files to an API Using FormData in JavaScript

async function uploadFileToAPI(file, otherData) {
  const formData = new FormData();
  formData.append('file', file); // 'file' is the field name the API expects

  // Append other text-based data if needed
  for (const key in otherData) {
    formData.append(key, otherData[key]);
  }

  try {
    const response = await fetch('https://api.example.com/upload', {
      method: 'POST',
      // When using FormData, the 'Content-Type' header is automatically set to 'multipart/form-data'
      // with the correct boundary, so do NOT set it manually.
      body: formData,
    });

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

    const result = await response.json();
    console.log('Upload successful:', result);
    return result;
  } catch (error) {
    console.error('Error uploading file:', error);
    throw error;
  }
}

// Example Usage (e.g., triggered by an input type='file' change event):
// const fileInput = document.getElementById('myFileInput');
// fileInput.addEventListener('change', async (event) => {
//   const selectedFile = event.target.files[0];
//   if (selectedFile) {
//     try {
//       const additionalInfo = { description: 'User profile picture', category: 'images' };
//       await uploadFileToAPI(selectedFile, additionalInfo);
//     } catch (error) {
//       alert('File upload failed!');
//     }
//   }
// });