Direct Client-Side File Upload using FormData and Fetch

document.addEventListener('DOMContentLoaded', () => {
    const uploadForm = document.getElementById('fileUploadForm');
    const fileInput = document.getElementById('fileInput');
    const uploadStatus = document.getElementById('uploadStatus');

    if (!uploadForm || !fileInput || !uploadStatus) {
        console.error('Required DOM elements not found.');
        return;
    }

    uploadForm.addEventListener('submit', async (event) => {
        event.preventDefault(); // Prevent default form submission

        const file = fileInput.files[0];
        if (!file) {
            uploadStatus.textContent = 'Please select a file to upload.';
            uploadStatus.style.color = 'orange';
            return;
        }

        uploadStatus.textContent = 'Uploading...';
        uploadStatus.style.color = 'blue';

        // Replace with your actual third-party API upload endpoint
        const API_UPLOAD_URL = 'https://api.example.com/upload';
        // Important: Some APIs might require an API key or authentication header
        const API_KEY = 'your_third_party_api_key'; // Use securely, don't hardcode in production!

        const formData = new FormData();
        formData.append('file', file); // 'file' is often the expected field name by the API
        formData.append('fileName', file.name); // Optional: add other metadata

        try {
            const response = await fetch(API_UPLOAD_URL, {
                method: 'POST',
                headers: {
                    // 'Content-Type': 'multipart/form-data' is usually set automatically by browser
                    // when sending FormData, do NOT set it manually as it might break boundary.
                    // Add other required headers, e.g., for authentication
                    'Authorization': `Bearer ${API_KEY}`,
                    // 'X-API-Key': API_KEY,
                },
                body: formData,
            });

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

            const result = await response.json();
            uploadStatus.textContent = `Upload successful! Response: ${JSON.stringify(result)}`;
            uploadStatus.style.color = 'green';
            console.log('Upload result:', result);

        } catch (error)
        {
            uploadStatus.textContent = `Upload error: ${error.message}`;
            uploadStatus.style.color = 'red';
            console.error('File upload error:', error);
        }
    });
});
/*
<form id="fileUploadForm">
    <input type="file" id="fileInput" accept="image/*" />
    <button type="submit">Upload File</button>
</form>
<p id="uploadStatus"></p>
*/