Uploading Files to a REST API with FormData

async function uploadFileToAPI(apiEndpoint, file, additionalData = {}) {
  const formData = new FormData();
  formData.append('file', file); // 'file' is the field name expected by the API

  // Append any additional text data
  for (const key in additionalData) {
    formData.append(key, additionalData[key]);
  }

  try {
    const response = await fetch(apiEndpoint, {
      method: 'POST',
      body: formData, // FormData automatically sets 'Content-Type': 'multipart/form-data'
      // headers: {
      //   'Authorization': 'Bearer YOUR_TOKEN_HERE', // Add authentication if needed
      // }
    });

    if (!response.ok) {
      const errorData = await response.json(); // Assuming API returns JSON error
      throw new Error(`HTTP error! status: ${response.status} - ${errorData.message || response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Error uploading file:", error);
    throw error;
  }
}

// Example usage (assuming an HTML input type="file" element with id="fileInput"):
// const fileInput = document.getElementById('fileInput');
// fileInput.addEventListener('change', async (event) => {
//   const selectedFile = event.target.files[0];
//   if (selectedFile) {
//     try {
//       const uploadResult = await uploadFileToAPI('https://api.example.com/upload', selectedFile, {
//         description: 'My uploaded document',
//         category: 'documents'
//       });
//       console.log('File uploaded successfully:', uploadResult);
//     } catch (error) {
//       console.error('File upload failed:', error);
//     }
//   }
// });