Securely Uploading Files to an API with FormData (JavaScript Frontend)

async function uploadFileToAPI(apiEndpoint, fileInputId, additionalData = {}) {
    const fileInput = document.getElementById(fileInputId);
    if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
        console.error('No file selected for upload.');
        alert('Please select a file to upload.');
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();

    // Append the file
    formData.append('file', file, file.name);

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

    try {
        const response = await fetch(apiEndpoint, {
            method: 'POST',
            body: formData,
            // When using FormData, the 'Content-Type' header is automatically set to 'multipart/form-data'
            // with the correct boundary. Manually setting it often causes issues.
            // headers: {
            //     'Authorization': 'Bearer YOUR_AUTH_TOKEN_HERE', // Add if your API requires authentication
            // }
        });

        if (!response.ok) {
            const errorData = await response.json().catch(() => ({ message: response.statusText }));
            throw new Error(`Upload failed: ${response.status} - ${errorData.message}`);
        }

        const result = await response.json();
        console.log('Upload successful:', result);
        alert('File uploaded successfully!');
        return result;
    } catch (error) {
        console.error('Error during file upload:', error.message);
        alert(`File upload failed: ${error.message}`);
        throw error;
    }
}

// Example HTML (assuming this snippet is in a script tag):
/*
<input type="file" id="myFileInput" />
<button onclick="uploadFileToAPI('/api/upload', 'myFileInput', { userId: '123', category: 'documents' })">Upload</button>
*/