303 lines
10 KiB
Cheetah
303 lines
10 KiB
Cheetah
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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;
|
|
}
|
|
.version {
|
|
position: fixed;
|
|
left: 8px;
|
|
bottom: 6px;
|
|
color: #999;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
@media (max-height: 800px) {
|
|
body { margin: 15px auto; padding: 15px; }
|
|
h1 { margin-bottom: 15px; font-size: 1.6em; }
|
|
h2 { margin: 15px 0 10px 0; }
|
|
.section { padding: 12px; margin: 12px 0; }
|
|
code { padding: 10px; margin: 8px 0; }
|
|
.upload-area { padding: 20px; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
body { padding: 12px; margin: 10px auto; }
|
|
h1 { font-size: 1.5em; margin-bottom: 15px; }
|
|
h2 { font-size: 1.15em; margin: 15px 0 10px 0; }
|
|
.section { padding: 12px; margin: 12px 0; }
|
|
code { padding: 10px; font-size: 0.85em; }
|
|
.upload-area { padding: 20px 15px; }
|
|
button { padding: 12px 20px; }
|
|
}
|
|
</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 type="button" onclick="event.stopPropagation(); 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>
|
|
|
|
<div class="version">v{{ .Version }}</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);
|
|
|
|
function clearResults() {
|
|
results.replaceChildren();
|
|
}
|
|
|
|
function showMessage(message) {
|
|
const div = document.createElement('div');
|
|
div.className = 'result-item';
|
|
div.textContent = message;
|
|
results.replaceChildren(div);
|
|
}
|
|
|
|
uploadArea.addEventListener('click', (e) => {
|
|
if (e.target.closest('button')) return;
|
|
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) {
|
|
showMessage('Upload failed: the following file(s) exceed the maximum size of ' +
|
|
formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', '));
|
|
return;
|
|
}
|
|
|
|
if (maxUploadSize && totalSize > maxUploadSize) {
|
|
showMessage('Upload failed: total upload size (' + formatBytes(totalSize) +
|
|
') exceeds the maximum of ' + formatBytes(maxUploadSize));
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
for (let file of files) {
|
|
formData.append('files', file);
|
|
}
|
|
|
|
progressContainer.style.display = 'block';
|
|
progressBar.style.width = '0%';
|
|
clearResults();
|
|
|
|
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) {
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
displayResults(response.urls);
|
|
} catch (e) {
|
|
showMessage('Upload failed: Unexpected response from server');
|
|
}
|
|
} 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;
|
|
}
|
|
}
|
|
showMessage('Upload failed: ' + message);
|
|
}
|
|
progressBar.style.width = '100%';
|
|
});
|
|
|
|
xhr.addEventListener('error', () => {
|
|
showMessage('Upload failed: Network error');
|
|
});
|
|
|
|
xhr.open('POST', '/upload');
|
|
xhr.send(formData);
|
|
}
|
|
|
|
function displayResults(urls) {
|
|
const heading = document.createElement('h3');
|
|
heading.textContent = 'Download URLs:';
|
|
results.replaceChildren(heading);
|
|
|
|
urls.forEach(url => {
|
|
const div = document.createElement('div');
|
|
div.className = 'result-item';
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.target = '_blank';
|
|
link.rel = 'noopener noreferrer';
|
|
link.textContent = url;
|
|
div.appendChild(link);
|
|
results.appendChild(div);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|