Upload Files to an API using FormData

async function uploadFileToAPI(file, metadata = {}) {
  const apiUrl = 'https://api.example.com/upload';
  const formData = new FormData();

  // Append the file
  formData.append('file', file, file.name); // 'file' is the field name expected by the API

  // Append additional metadata
  for (const key in metadata) {
    if (Object.hasOwnProperty.call(metadata, key)) {
      formData.append(key, metadata[key]);
    }
  }

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      body: formData, // Fetch API automatically sets Content-Type: multipart/form-data with boundary
      // You might need to include Authorization headers if your API requires it
      // headers: {
      //   'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
      // }
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => response.text());
      throw new Error(`Upload failed with status ${response.status}: ${JSON.stringify(errorData)}`);
    }

    const result = await response.json();
    console.log('File uploaded successfully:', result);
    return result;
  } catch (error) {
    console.error('Error during file upload:', error);
    throw error;
  }
}

// Example Usage (assuming you have an <input type="file" id="fileInput"> element)
// document.getElementById('fileInput').addEventListener('change', async (event) => {
//   const selectedFile = event.target.files[0];
//   if (selectedFile) {
//     const additionalData = {
//       description: 'A photo of my cat',
//       userId: '123'
//     };
//     try {
//       const uploadResult = await uploadFileToAPI(selectedFile, additionalData);
//       alert('Upload complete! Check console for details.');
//     } catch (error) {
//       alert('Upload failed: ' + error.message);
//     }
//   }
// });