113 lines
4.1 KiB
HTML
113 lines
4.1 KiB
HTML
|
|
<!-- templates/upload.html -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}Upload File - Flask NEO Storage{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-6 mx-auto">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Upload File ke NEO Object Storage</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<label for="file" class="form-label">Pilih File</label>
|
|
<input type="file" class="form-control" id="file" name="file" required>
|
|
<div class="form-text">Semua jenis file diperbolehkan</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Upload File</button>
|
|
<a href="/files" class="btn btn-outline-secondary">Lihat Files</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload via AJAX -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5>Upload via AJAX (Advanced)</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="ajaxUploadForm">
|
|
<div class="mb-3">
|
|
<label for="ajaxFile" class="form-label">Pilih File</label>
|
|
<input type="file" class="form-control" id="ajaxFile" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="folder" class="form-label">Folder (opsional)</label>
|
|
<input type="text" class="form-control" id="folder" placeholder="uploads" value="uploads">
|
|
</div>
|
|
<button type="submit" class="btn btn-success">Upload dengan AJAX</button>
|
|
</form>
|
|
<div id="uploadProgress" class="mt-3" style="display: none;">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div id="uploadResult" class="mt-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('ajaxUploadForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const fileInput = document.getElementById('ajaxFile');
|
|
const folderInput = document.getElementById('folder');
|
|
const progressDiv = document.getElementById('uploadProgress');
|
|
const resultDiv = document.getElementById('uploadResult');
|
|
|
|
if (!fileInput.files[0]) {
|
|
alert('Pilih file terlebih dahulu!');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
formData.append('folder', folderInput.value || 'uploads');
|
|
|
|
// Show progress
|
|
progressDiv.style.display = 'block';
|
|
resultDiv.innerHTML = '';
|
|
|
|
fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
progressDiv.style.display = 'none';
|
|
|
|
if (data.success) {
|
|
resultDiv.innerHTML = `
|
|
<div class="alert alert-success">
|
|
<h6>Upload berhasil!</h6>
|
|
<p><strong>URL:</strong> <a href="${data.url}" target="_blank">${data.url}</a></p>
|
|
<p><strong>Filename:</strong> ${data.filename}</p>
|
|
</div>
|
|
`;
|
|
fileInput.value = '';
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>Error:</strong> ${data.error}
|
|
</div>
|
|
`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
progressDiv.style.display = 'none';
|
|
resultDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>Error:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|