forked from tildetown/town
88 lines
2.8 KiB
HTML
88 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ .title }}</title>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
}
|
|
.message {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.success {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
border: 1px solid #d6e9c6;
|
|
}
|
|
.error {
|
|
background-color: #f2dede;
|
|
color: #a94442;
|
|
border: 1px solid #ebccd1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>town share</h1>
|
|
<p style="text-align: center;"></p>
|
|
|
|
<form action="/upload" method="post" id="uploadForm" class="upload-form" enctype="multipart/form-data">
|
|
<input type="file" id="imageInput" name="image" accept="image/jpeg,image/png,image/gif" required>
|
|
<p>jpg, png, gif (max 10mb)</p>
|
|
<button type="submit" class="upload-button" id="uploadButton" disabled>Upload Image</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{ if .error }}
|
|
<div class="message error">{{ .error }}</div>
|
|
{{ end }}
|
|
|
|
{{ if .success }}
|
|
<div class="message success">{{ .success }}</div>
|
|
{{ end }}
|
|
|
|
<div id="messageArea" class="message">
|
|
</div>
|
|
|
|
<script>
|
|
const fileInput = document.getElementById('imageInput');
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const uploadButton = document.getElementById('uploadButton');
|
|
const messageArea = document.getElementById('messageArea');
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
handleFileSelection(e.target.files);
|
|
});
|
|
|
|
function handleFileSelection(files) {
|
|
if (files.length > 0) {
|
|
const file = files[0];
|
|
if (file.type.startsWith('image/')) {
|
|
if (file.size <= 10 * 1024 * 1024) { // 10MB limit
|
|
fileInput.files = files;
|
|
uploadButton.disabled = false;
|
|
dropZone.querySelector('p').textContent = `Selected: ${file.name}`;
|
|
} else {
|
|
showMessage('File is too large. Maximum size is 10MB.', 'error');
|
|
}
|
|
} else {
|
|
showMessage('Please select an image file (JPG, PNG, or GIF).', 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
function showMessage(text, type) {
|
|
messageArea.innerHTML = `<div class="message ${type}">${text}</div>`;
|
|
if (type === 'error') {
|
|
uploadButton.disabled = true;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|