119 lines
5.1 KiB
HTML
119 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FITRA - File transfer API</title>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
|
|
h1, h2 { color: #333; }
|
|
code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Monaco', 'Consolas', monospace; }
|
|
pre { background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }
|
|
.endpoint { margin: 20px 0; padding: 15px; border-left: 4px solid #007acc; background: #f9f9f9; }
|
|
.method { display: inline-block; padding: 3px 8px; border-radius: 3px; color: white; font-weight: bold; margin-right: 10px; }
|
|
.get { background: #61affe; }
|
|
.post { background: #49cc90; }
|
|
.step { margin: 10px 0; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
|
|
.storage-info { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 5px; border-left: 4px solid #28a745; }
|
|
.progress-bar { width: 100%; height: 20px; background: #e9ecef; border-radius: 10px; overflow: hidden; margin: 10px 0; }
|
|
.progress-fill { height: 100%; background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 90%); transition: width 0.3s ease; border-radius: 10px; }
|
|
.storage-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🚀 FITRA - File transfer API</h1>
|
|
<p><strong>Version:</strong> 1.0.0</p>
|
|
<p>Simple file upload and download service for developers using HTTP requests in CLI.</p>
|
|
|
|
<div class="storage-info">
|
|
<h3>💾 Todays storage usage</h3>
|
|
<p>
|
|
<small>This resets after 24h</small>
|
|
</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div class="storage-stats">
|
|
<span id="storage-used">Loading...</span>
|
|
<span id="storage-percent">Loading...</span>
|
|
<span id="storage-total">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>📋 API endpoints</h2>
|
|
|
|
<div class="endpoint">
|
|
<h3><span class="method post">POST</span>/upload</h3>
|
|
<p><strong>Description:</strong> Upload a file</p>
|
|
<p><strong>cURL example:</strong></p>
|
|
<pre><code>curl -X POST -F "file=@/path/to/your/file.txt" {{.BaseURL}}/upload</code></pre>
|
|
</div>
|
|
|
|
<div class="endpoint">
|
|
<h3><span class="method get">GET</span>/uploads/{fileID}/{filename}</h3>
|
|
<p><strong>Description:</strong> Download a file using the ID and filename from upload response</p>
|
|
<p><strong>cURL example:</strong></p>
|
|
<pre><code>curl -O {{.BaseURL}}/uploads/{fileID}/{filename}</code></pre>
|
|
</div>
|
|
|
|
<div class="endpoint">
|
|
<h3><span class="method get">GET</span>/storage</h3>
|
|
<p><strong>Description:</strong> Check storage usage and capacity</p>
|
|
<p><strong>cURL example:</strong></p>
|
|
<pre><code>curl {{.BaseURL}}/storage</code></pre>
|
|
</div>
|
|
|
|
<div class="endpoint">
|
|
<h3><span class="method get">GET</span>/health</h3>
|
|
<p><strong>Description:</strong> Check service health</p>
|
|
<p><strong>cURL example:</strong></p>
|
|
<pre><code>curl {{.BaseURL}}/health</code></pre>
|
|
</div>
|
|
|
|
<h2>🔄 Usage</h2>
|
|
<div class="step">
|
|
<strong>Step 1:</strong> Upload a file using POST /upload with form-data 'file' parameter
|
|
</div>
|
|
<div class="step">
|
|
<strong>Step 2:</strong> Use the returned 'id' and 'filename' to construct download URL
|
|
</div>
|
|
<div class="step">
|
|
<strong>Step 3:</strong> Download the file using GET /uploads/{id}/{filename}
|
|
</div>
|
|
|
|
<h2>💡 Examples</h2>
|
|
<pre><code># 1. Upload a file
|
|
curl -X POST -F "file=@myfile.txt" {{.BaseURL}}/upload
|
|
|
|
# Response will include:
|
|
# {
|
|
# "id": "abc123...",
|
|
# "filename": "myfile.txt",
|
|
# "url": "{{.BaseURL}}/uploads/abc123.../myfile.txt"
|
|
# }
|
|
|
|
# 2. Download the file
|
|
curl -O {{.BaseURL}}/uploads/abc123.../myfile.txt</code></pre>
|
|
|
|
<script>
|
|
async function loadStorageInfo() {
|
|
try {
|
|
const response = await fetch('{{.BaseURL}}/storage');
|
|
const data = await response.json();
|
|
const storage = data.storage;
|
|
|
|
document.getElementById('storage-used').textContent = `${storage.used_gb.toFixed(2)} GB used`;
|
|
document.getElementById('storage-percent').textContent = `${storage.usage_percent.toFixed(1)}% full`;
|
|
document.getElementById('storage-total').textContent = `${storage.max_gb} GB total`;
|
|
document.getElementById('progress-fill').style.width = `${storage.usage_percent}%`;
|
|
} catch (error) {
|
|
document.getElementById('storage-used').textContent = 'Error loading storage info';
|
|
document.getElementById('storage-percent').textContent = '';
|
|
document.getElementById('storage-total').textContent = '';
|
|
}
|
|
}
|
|
|
|
loadStorageInfo();
|
|
</script>
|
|
</body>
|
|
</html> |