fybe_servers/adrive
1
1
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

use bootstrap style alerts, progress bars
All checks were successful
Flask Run Test / Flask-Run-Test (push) Successful in 10s
Details

Browse Source
This commit is contained in:
Andrew K
2026-01-09 13:30:36 +09:00
parent 2be9e51805
commit cc12b95c98
3 changed files with 93 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/script.js
View File

@@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('fileUpload');
const progress = document.getElementById('uploadProgress');
const progressContainer = document.getElementById('uploadProgressContainer');
const progressText = document.getElementById('uploadProgressText');
const uploadBtn = document.getElementById('uploadBtn');
@@ -42,8 +43,10 @@ document.addEventListener('DOMContentLoaded', function() {
if (ev.lengthComputable) {
const percent = Math.round((ev.loaded / ev.total) * 100);
if (progress) {
progress.style.display = 'block';
progress.value = percent;
if (progressContainer) progressContainer.style.display = 'block';
progress.style.width = percent + '%';
progress.setAttribute('aria-valuenow', percent);
progress.textContent = percent + '%';
}
if (progressText) {
progressText.style.display = 'block';
@@ -76,13 +79,18 @@ document.addEventListener('DOMContentLoaded', function() {
} catch (e) {
window.location.href = '/upload';
return;
} finally {
} finally {
if (uploadBtn) {
uploadBtn.disabled = false;
uploadBtn.classList.remove('yellowBtn');
uploadBtn.value = 'Upload';
}
if (progress) { progress.style.display = 'none'; progress.value = 0; }
if (progress) {
if (progressContainer) progressContainer.style.display = 'none';
progress.style.width = '0%';
progress.setAttribute('aria-valuenow', 0);
progress.textContent = '0%';
}
if (progressText) { progressText.style.display = 'none'; progressText.textContent = '0%'; }
// clear file input and reusable checkbox after successful upload
if (fileInput) fileInput.value = '';
@@ -110,7 +118,12 @@ document.addEventListener('DOMContentLoaded', function() {
uploadBtn.value = 'Upload';
}
if (fileInput) fileInput.value = '';
if (progress) { progress.style.display = 'none'; progress.value = 0; }
if (progress) {
if (progressContainer) progressContainer.style.display = 'none';
progress.style.width = '0%';
progress.setAttribute('aria-valuenow', 0);
progress.textContent = '0%';
}
if (progressText) progressText.style.display = 'none';
});

7
static/styles.css
View File

@@ -35,14 +35,15 @@ body,html {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
width: 80%;
border: 1px solid rgb(40, 40, 40);
padding-bottom: 40px;
padding: 50px;
}
.form-section {
padding: 15px 0 0 15px;
width: 50%;
width: 100%;
color: var(--light);
flex-shrink: 0;
}
@@ -116,6 +117,8 @@ button[type='button']:hover,
display: flex;
flex-direction: column;
gap: 15px;
padding: 10px;
}
.flashes li {
list-style-type: none;

101
templates/upload.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,58 +8,87 @@
<title>ADrive Share</title>
<script src="https://kit.fontawesome.com/972393379b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="app">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul class="flashes">
{% for category, message in messages %}
<!-- category: message, error, info, warning -->
<li class="{{ category }}"><strong>{{ message }}</strong></li>
{% endfor %}
</ul>
<ul class="flashes">
{% for category, message in messages %}
<!-- category: message, error, info, warning -->
{% if category == 'message' %}
{% set category = 'primary' %}
{% endif %}
{% if category == 'error' %}
{% set category = 'danger' %}
{% endif %}
{% if category == 'info' %}
{% set category = 'info' %}
{% endif %}
{% if category == 'warning' %}
{% set category = 'warning' %}
{% endif %}
<li class="alert alert-{{ category }}">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<div class="form-section">
<form id="uploadForm" action="/sendfile" method="post" enctype="multipart/form-data">
{% if loggedIn %}
<h4>You are currently logged in as {{ username }}.</h4>
<h1>ADrive File Sharing <span class="badge text-bg-primary">{{ username }}</span></h1>
{% else %}
<h4>You are currently not logged in.</h4>
<h1>ADrive File Sharing <span class="badge text-bg-primary">Guest</span></h1>
{% endif %}
<span style="font-size: 20px;">
<i class="fa-solid fa-server fa-xs" style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
<span id="mirrorText">Finding Nearby Mirror</span> <i class="fa-solid fa-circle-dot fa-beat-fade fa-2xs" style="color: #ff9500;" id="mirrorLogo"></i>
<i class="fa-solid fa-server fa-xs"
style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
<span id="mirrorText">Finding Nearby Mirror</span> <i
class="fa-solid fa-circle-dot fa-beat-fade fa-2xs" style="color: #ff9500;" id="mirrorLogo"></i>
</span>
<span style="font-size: 20px;">
<i class="fa-solid fa-server fa-xs" style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
<i class="fa-solid fa-server fa-xs"
style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
Location Not Found <i class="fa-solid fa-circle-dot fa-2xs" style="color: #c10101;"></i>
</span>
<input type="file" name="file" id="fileUpload" required aria-required>
<input type="file" name="file" id="fileUpload" class="form-control" required aria-required>
<input type="hidden" id="quotaGB" value="{{ quota_gb }}">
<input type="hidden" id="quotaUsedGB" value="{{ quota_usage }}">
<progress id="uploadProgress" value="0" max="100" style="display:none;width:100%;margin-top:8px"></progress>
<div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
<div style="display: flex; flex-direction: row;">
<input type="checkbox" name="reusable" style="display: inline-block;">
<span>Reusable?</span>
<div class="progress" id="uploadProgressContainer" style="display:none;width:100%;margin-top:8px">
<div id="uploadProgress" class="progress-bar bg-success" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" name="reusable"
aria-label="Checkbox for following text input" style="border: 1px solid rgb(106, 106, 106);">
<label for="reusable" style="margin-left: 6px; margin-bottom: 0;">Reusable
Link</label>
</div>
</div>
<input type="submit" value="Upload" id="uploadBtn" onclick="uploadAnim()" style="transition-duration: 400ms;">
<input type="submit" class="" value="Upload" id="uploadBtn" onclick="uploadAnim()"
style="transition-duration: 400ms;">
</form>
<form>
<input type="text" id="codeInput">
<button type="button" value="Download" onclick="downloadClick()">Download</button>
<button type="button" value="Download" class="btn btn-primary" onclick="downloadClick()">Download</button>
</form>
{% if not loggedIn %}
<a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign In</a>
<a href="/register" class="sign-in-button" style="text-decoration: none; background: rgb(32, 0, 139)">Register</a><br>
<p style="color: gray; font-size: 11px; text-align: center;">Signing in is not required. You can at any time register and sign in to manage your existing codes for free. You can manage up to 1GB of files.</p>
<a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign
In</a>
<a href="/register" class="sign-in-button"
style="text-decoration: none; background: rgb(32, 0, 139)">Register</a><br><br>
<p style="color: gray; font-size: 11px; text-align: center;">Signing in is not required. You can at any time
register and sign in to manage your existing codes for free. You can manage up to 1GB of files.</p>
{% else %}
<a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View Dashboard</a>
<a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign Out</a>
<a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View
Dashboard</a>
<a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign
Out</a>
{% endif %}
</div>
@@ -69,7 +99,7 @@
<script>
//document.getElementById("uploadBtn").addEventListener("click", uploadAnim);
function downloadClick(){
function downloadClick() {
const codeEl = document.getElementById("codeInput");
const code = codeEl.value;
// clear input when clicked
@@ -95,16 +125,16 @@
<script>
// Client-side quota check before uploading large files
(function(){
(function () {
const fileInput = document.getElementById('fileUpload');
const uploadBtn = document.getElementById('uploadBtn');
const quotaGB = parseFloat(document.getElementById('quotaGB').value) || 0;
const usedGB = parseFloat(document.getElementById('quotaUsedGB').value) || 0;
const remainingGB = Math.max(0, quotaGB - usedGB);
function ensureFlashesContainer(){
function ensureFlashesContainer() {
let flashes = document.querySelector('.flashes');
if (!flashes){
if (!flashes) {
flashes = document.createElement('ul');
flashes.className = 'flashes';
const app = document.querySelector('.app');
@@ -113,12 +143,12 @@
return flashes;
}
function clearClientFlash(){
function clearClientFlash() {
const flashes = document.querySelectorAll('.flashes li.client-quota-warning');
flashes.forEach(n => n.remove());
}
function showClientFlash(message){
function showClientFlash(message) {
clearClientFlash();
const flashes = ensureFlashesContainer();
const li = document.createElement('li');
@@ -129,14 +159,14 @@
flashes.prepend(li);
}
if (fileInput){
fileInput.addEventListener('change', function(e){
if (fileInput) {
fileInput.addEventListener('change', function (e) {
clearClientFlash();
uploadBtn.disabled = false;
const f = fileInput.files && fileInput.files[0];
if (!f) return;
const fileGB = f.size / (1024 * 1024 * 1024);
if (fileGB > remainingGB){
if (fileGB > remainingGB) {
showClientFlash('You do not have sufficient quota to manage this file. If you choose to upload this file, you will not be able to manage it through your dashboard.');
// still allow upload; server will accept but will not set owner when quota insufficient
} else {
@@ -148,5 +178,10 @@
</script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</body>
</html>