async function uploadFile(url, 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) {
    if (Object.hasOwnProperty.call(additionalData, key)) {
      formData.append(key, additionalData[key]);
    }
  }

  try {
    const response = await fetch(url, {
      method: 'POST',
      // No 'Content-Type' header needed for FormData; browser sets it automatically
      body: formData
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
      throw new Error(`HTTP error! Status: ${response.status}. Message: ${errorData.message || response.statusText}`);
    }

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

// Example usage:
// Assuming you have an input element like: <input type="file" id="fileInput">
// const fileInput = document.getElementById('fileInput');
// fileInput.addEventListener('change', async (event) => {
//   const selectedFile = event.target.files[0];
//   if (selectedFile) {
//     try {
//       const uploadResult = await uploadFile(
//         'https://api.example.com/upload',
//         selectedFile,
//         { description: 'User profile picture', userId: '123' }
//       );
//       // Handle successful upload result
//     } catch (error) {
//       // Handle upload error
//     }
//   }
// });