Upload Files to a REST API Using FormData in JavaScript

async function uploadFile(apiEndpoint, file, additionalData = {}) {
  const formData = new FormData();
  formData.append('file', file, file.name);

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

  try {
    const response = await fetch(apiEndpoint, {
      method: 'POST',
      body: formData // fetch automatically sets 'Content-Type': 'multipart/form-data' with FormData
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorText}`);
    }

    return await response.json();
  } catch (error) {
    console.error('File upload failed:', error);
    throw error;
  }
}

// Example usage with an HTML input type="file":
// const fileInput = document.getElementById('myFileInput');
// const uploadButton = document.getElementById('uploadButton');

// uploadButton.addEventListener('click', async () => {
//   if (fileInput.files.length > 0) {
//     const selectedFile = fileInput.files[0];
//     try {
//       const result = await uploadFile('https://api.example.com/upload', selectedFile, { description: 'User profile picture' });
//       console.log('Upload successful:', result);
//     } catch (error) {
//       console.error('Upload failed:', error.message);
//     }
//   } else {
//     alert('Please select a file to upload.');
//   }
// });

// To simulate file for testing (e.g., in Node.js or a test environment):
// const dummyFile = new File(['hello world'], 'hello.txt', { type: 'text/plain' });
// uploadFile('https://api.example.com/upload', dummyFile, { userId: 123 })
//   .then(res => console.log('Dummy upload success:', res))
//   .catch(err => console.error('Dummy upload error:', err));