beam/index.html.tmpl

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beam - File Upload Service</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: monospace;
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 { margin-bottom: 30px; font-size: 2em; }
        h2 { margin: 30px 0 15px 0; font-size: 1.3em; }
        .section {
            background: #f5f5f5;
            padding: 20px;
            margin: 20px 0;
            border-radius: 4px;
        }
        code {
            background: #333;
            color: #0f0;
            padding: 15px;
            display: block;
            margin: 10px 0;
            border-radius: 4px;
            overflow-x: auto;
        }
        .upload-area {
            border: 3px dashed #ccc;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .upload-area.dragover {
            border-color: #333;
            background: #f0f0f0;
        }
        .upload-area:hover {
            border-color: #666;
        }
        input[type="file"] { display: none; }
        button {
            background: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-family: monospace;
            font-size: 1em;
            border-radius: 4px;
            margin-top: 10px;
        }
        button:hover { background: #555; }
        .progress-container {
            width: 100%;
            background: #ddd;
            border-radius: 4px;
            margin: 10px 0;
            height: 20px;
            display: none;
        }
        .progress-bar {
            height: 100%;
            background: #333;
            border-radius: 4px;
            width: 0;
            transition: width 0.3s;
        }
        .results {
            margin-top: 20px;
        }
        .result-item {
            background: white;
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
            word-break: break-all;
        }
        .result-item a {
            color: #0066cc;
        }
    </style>
</head>
<body>
    <h1>🚀 Beam - File Upload Service</h1>

    <div class="section">
        <h2>Upload with curl</h2>
        <code>curl --upload-file myfile.txt {{ .Proto }}://{{ .Host }}/myfile.txt</code>
        <p style="margin-top: 10px;">The server will respond with a download URL.</p>
        <p style="margin-top: 10px;">Maximum upload size: <strong id="maxUploadSizeLabel" data-max-bytes="{{ .MaxUploadSize }}">{{ .MaxUploadSize }} bytes</strong></p>
    </div>

    <div class="section">
        <h2>Download a file</h2>
        <code>curl {{ .Proto }}://{{ .Host }}/x123abcx/myfile.txt -o myfile.txt</code>
        <p style="margin-top: 10px;">Or simply open the URL in your browser.</p>
    </div>

    <div class="section">
        <h2>Web Upload</h2>
        <div class="upload-area" id="uploadArea">
            <p>📁 Click to select files or drag and drop here</p>
            <p style="margin-top: 10px; font-size: 0.85em; color: #666;">Maximum file size: <span id="maxUploadSizeText"></span></p>
            <input type="file" id="fileInput" multiple>
            <button onclick="document.getElementById('fileInput').click()">Select Files</button>
        </div>
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="results" id="results"></div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const results = document.getElementById('results');
        const maxUploadSize = parseInt(document.getElementById('maxUploadSizeLabel').dataset.maxBytes, 10) || 0;

        function formatBytes(bytes) {
            if (!bytes) return 'unknown';
            const units = ['B', 'KB', 'MB', 'GB', 'TB'];
            let value = bytes;
            let unitIndex = 0;
            while (value >= 1024 && unitIndex < units.length - 1) {
                value /= 1024;
                unitIndex++;
            }
            return value.toFixed(unitIndex === 0 ? 0 : 1) + ' ' + units[unitIndex];
        }

        document.getElementById('maxUploadSizeLabel').textContent = formatBytes(maxUploadSize);
        document.getElementById('maxUploadSizeText').textContent = formatBytes(maxUploadSize);

        uploadArea.addEventListener('click', () => fileInput.click());

        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            uploadFiles(files);
        });

        fileInput.addEventListener('change', (e) => {
            uploadFiles(e.target.files);
        });

        function uploadFiles(files) {
            if (files.length === 0) return;

            const oversizedFiles = [];
            let totalSize = 0;
            for (let file of files) {
                totalSize += file.size;
                if (maxUploadSize && file.size > maxUploadSize) {
                    oversizedFiles.push(file.name);
                }
            }

            if (oversizedFiles.length > 0) {
                results.innerHTML = '<div class="result-item">Upload failed: the following file(s) exceed the maximum size of ' +
                    formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', ') + '</div>';
                return;
            }

            if (maxUploadSize && totalSize > maxUploadSize) {
                results.innerHTML = '<div class="result-item">Upload failed: total upload size (' + formatBytes(totalSize) +
                    ') exceeds the maximum of ' + formatBytes(maxUploadSize) + '</div>';
                return;
            }

            const formData = new FormData();
            for (let file of files) {
                formData.append('files', file);
            }

            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            results.innerHTML = '';

            const xhr = new XMLHttpRequest();

            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    progressBar.style.width = percent + '%';
                }
            });

            xhr.addEventListener('load', () => {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    displayResults(response.urls);
                } else {
                    let message = xhr.statusText;
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.error) {
                            message = response.error;
                        }
                    } catch (e) {
                        if (xhr.responseText) {
                            message = xhr.responseText;
                        }
                    }
                    results.innerHTML = '<div class="result-item">Upload failed: ' + message + '</div>';
                }
                progressBar.style.width = '100%';
            });

            xhr.addEventListener('error', () => {
                results.innerHTML = '<div class="result-item">Upload failed: Network error</div>';
            });

            xhr.open('POST', '/upload');
            xhr.send(formData);
        }

        function displayResults(urls) {
            results.innerHTML = '<h3>Download URLs:</h3>';
            urls.forEach(url => {
                const div = document.createElement('div');
                div.className = 'result-item';
                div.innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a>';
                results.appendChild(div);
            });
        }
    </script>
</body>
</html>