<!DOCTYPE html>
<html>
<head>
    <title>Upload File</title>
</head>
<body>
    <h1>Hi <%= user.username %>,</h1>
    <h2><%= user._id %> - <%= user.id %></h2>
    <h2>Upload your file</h2>
    <form id="upload-form">
        <input type="file" name="file" id="file" required>
        <button type="button" onclick="uploadFile()">Upload</button>
    </form>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('file');
            const file = fileInput.files[0];

            var formData = new FormData();
            formData.append('file', file);

            fetch('/upload', {
                method: 'POST',
                headers: {
                    'X-API-KEY': '<%= user.apiKey %>',
                    'X-User-ID': '<%= user.id %>'
                },
                body: formData
            }).then(response => {
                if (response.ok) {
                    alert('File uploaded successfully');
                    return response.json();
                } else {
                    return response.text().then(errorMessage => {
                        throw new Error(errorMessage);
                    });
                }
            }).then(data => {
                console.log(data);
            }).catch(error => {
                alert(`${error.message}`);
            });
        }
    </script>
</body>
</html>
