tempuploader / static /index.html
triflix's picture
Create static/index.html
60bce5d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Temp Uploader</title>
</head>
<body class="h-screen flex items-center justify-center bg-gray-100">
<div class="bg-white p-6 rounded-xl shadow-lg w-96">
<h1 class="text-2xl font-bold mb-4">Upload a File</h1>
<input id="fileInput" type="file" class="mb-4 w-full" />
<button id="uploadBtn" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Upload
</button>
<p id="status" class="mt-4 text-sm text-gray-700"></p>
</div>
<script>
const btn = document.getElementById('uploadBtn');
const status = document.getElementById('status');
btn.addEventListener('click', async () => {
const input = document.getElementById('fileInput');
if (!input.files.length) { alert('Please select a file.'); return; }
const form = new FormData();
form.append('file', input.files[0]);
status.textContent = 'Uploading...';
try {
const res = await fetch('/upload', { method: 'POST', body: form });
const data = await res.json();
if (data.url) {
status.innerHTML = `Uploaded: <a href="${data.url}" target="_blank" class="text-blue-600 underline">${data.filename}</a>`;
} else {
status.textContent = 'Upload failed';
}
} catch (e) {
status.textContent = 'Error uploading file';
}
});
</script>
</body>
</html>