Uploading Files to a REST API with FormData and Fetch API

async function uploadFileToAPI(url, file, additionalData = {}) {
  const formData = new FormData();
  formData.append('file', file); // 'file' is the name of the file input field on the server

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

  try {
    const response = await fetch(url, {
      method: 'POST',
      body: formData, // Fetch API automatically sets Content-Type to multipart/form-data
    });

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

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

// Example Usage with a file input
/*
<input type="file" id="myFileInput" />
<button onclick="handleUpload()">Upload</button>

async function handleUpload() {
  const fileInput = document.getElementById('myFileInput');
  const file = fileInput.files[0];
  if (!file) {
    alert('Please select a file first.');
    return;
  }

  try {
    const result = await uploadFileToAPI('https://api.example.com/upload', file, { userId: '123' });
    console.log('Upload successful:', result);
  } catch (err) {
    console.error('Upload failed:', err);
  }
}
*/