Uploading Files to an API with FormData

async function uploadFileToApi(endpoint, file, metadata = {}) {
  const formData = new FormData();
  formData.append('file', file, file.name);

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

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      body: formData,
      // When using FormData, the 'Content-Type' header is automatically
      // set to 'multipart/form-data' with the correct boundary by the browser.
      // Do NOT set it manually, or boundary will be missing.
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Upload failed: ${response.status} - ${errorText}`);
    }

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

// Usage example with an HTML input:
// document.getElementById('fileInput').addEventListener('change', async (event) => {
//   const selectedFile = event.target.files[0];
//   if (selectedFile) {
//     try {
//       const uploadResult = await uploadFileToApi(
//         '/api/upload',
//         selectedFile,
//         { description: 'User profile picture', userId: '123' }
//       );
//       console.log('Upload finished, response:', uploadResult);
//     } catch (error) {
//       console.error('Upload failed:', error);
//     }
//   }
// });

// // HTML part (example):
// // <input type="file" id="fileInput" />
// // <button onclick="document.getElementById('fileInput').click()">Select File to Upload</button>