Upload a File to an API using FormData in JavaScript

<!-- HTML part for demonstration -->
<input type="file" id="fileInput" accept="image/*,application/pdf">
<button id="uploadButton">Upload File</button>

<script>
async function uploadFile(file, url, apiKey) {
  const formData = new FormData();
  formData.append('file', file); // 'file' is the field name expected by the API
  // You can append other form fields too:
  // formData.append('userId', '123');

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        // DO NOT set Content-Type header when sending FormData; fetch sets it automatically
        'Authorization': `Bearer ${apiKey}`
      },
      body: formData
    });

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

    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:
document.getElementById('uploadButton').addEventListener('click', async () => {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length > 0) {
    const selectedFile = fileInput.files[0];
    const API_UPLOAD_URL = 'https://api.example.com/upload';
    const MY_API_KEY = 'your_secret_api_key';

    try {
      await uploadFile(selectedFile, API_UPLOAD_URL, MY_API_KEY);
      alert('File upload initiated!');
    } catch (error) {
      alert('File upload failed: ' + error.message);
    }
  } else {
    alert('Please select a file first.');
  }
});
</script>