flask-neo-object-storage/templates/files.html

98 lines
3.1 KiB
HTML

<!-- templates/files.html -->
{% extends "base.html" %}
{% block title %}Files - Flask NEO Storage{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Files di NEO Object Storage</h2>
<a href="/upload" class="btn btn-primary">Upload File Baru</a>
</div>
{% if files %}
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Preview</th>
<th>Filename</th>
<th>Size</th>
<th>Modified</th>
<th>URL</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for file in files %}
<tr>
<td>
{% if file.filename.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.webp')) %}
<img src="{{ file.url }}" alt="Preview" style="max-width: 50px; max-height: 50px;" class="rounded">
{% else %}
<i class="fas fa-file" style="font-size: 30px; color: #6c757d;"></i>
{% endif %}
</td>
<td>{{ file.filename }}</td>
<td>{{ "%.2f"|format(file.size / 1024) }} KB</td>
<td>{{ file.modified }}</td>
<td>
<a href="{{ file.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
Buka
</a>
<button class="btn btn-sm btn-outline-secondary" onclick="copyUrl('{{ file.url }}')">
Copy URL
</button>
</td>
<td>
<button class="btn btn-sm btn-danger" onclick="deleteFile('{{ file.key }}', this)">
Hapus
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info">
<h4>Belum ada file</h4>
<p>Belum ada file yang diupload. <a href="/upload">Upload file pertama</a> sekarang!</p>
</div>
{% endif %}
<script>
function copyUrl(url) {
navigator.clipboard.writeText(url).then(function() {
alert('URL berhasil dicopy ke clipboard!');
});
}
function deleteFile(objectKey, button) {
if (confirm('Yakin ingin menghapus file ini?')) {
fetch('/api/delete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
object_key: objectKey
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Remove row from table
button.closest('tr').remove();
alert('File berhasil dihapus!');
} else {
alert('Error menghapus file: ' + data.error);
}
})
.catch(error => {
alert('Error: ' + error.message);
});
}
}
</script>
{% endblock %}