Uploading Files to an API with FormData and Fetch

async function uploadFile(fileInputId, uploadUrl) {
  const fileInput = document.getElementById(fileInputId);
  const file = fileInput.files[0];

  if (!file) {
    console.error("No file selected.");
    return;
  }

  const formData = new FormData();
  formData.append("file", file); // 'file' is the field name expected by your API
  formData.append("description", "A file uploaded via JavaScript"); // Add other form data if needed

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

    if (!response.ok) {
      throw new Error(`Upload failed with status: ${response.status}`);
    }

    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 an <input type="file" id="myFileInput"> exists):
// const uploadBtn = document.getElementById("uploadButton");
// uploadBtn.addEventListener("click", () => {
//   uploadFile("myFileInput", "/api/upload")
//     .then(res => console.log("Upload response:", res))
//     .catch(err => console.error("Upload error:", err));
// });