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

7
static/styles.css
View File

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

105
templates/upload.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,58 +8,87 @@
<title>ADrive Share</title> <title>ADrive Share</title>
<script src="https://kit.fontawesome.com/972393379b.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/972393379b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> <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> </head>
<body> <body>
<div class="app"> <div class="app">
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
<ul class="flashes"> <ul class="flashes">
{% for category, message in messages %} {% for category, message in messages %}
<!-- category: message, error, info, warning --> <!-- category: message, error, info, warning -->
<li class="{{ category }}"><strong>{{ message }}</strong></li> {% if category == 'message' %}
{% endfor %} {% set category = 'primary' %}
</ul> {% 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 %} {% endif %}
{% endwith %} {% endwith %}
<div class="form-section"> <div class="form-section">
<form id="uploadForm" action="/sendfile" method="post" enctype="multipart/form-data"> <form id="uploadForm" action="/sendfile" method="post" enctype="multipart/form-data">
{% if loggedIn %} {% 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 %} {% else %}
<h4>You are currently not logged in.</h4> <h1>ADrive File Sharing <span class="badge text-bg-primary">Guest</span></h1>
{% endif %} {% endif %}
<span style="font-size: 20px;"> <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"
<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> 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>
<span style="font-size: 20px;"> <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> Location Not Found <i class="fa-solid fa-circle-dot fa-2xs" style="color: #c10101;"></i>
</span> </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="quotaGB" value="{{ quota_gb }}">
<input type="hidden" id="quotaUsedGB" value="{{ quota_usage }}"> <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 class="progress" id="uploadProgressContainer" style="display:none;width:100%;margin-top:8px">
<div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div> <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 style="display: flex; flex-direction: row;"> </div>
<input type="checkbox" name="reusable" style="display: inline-block;"> <div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
<span>Reusable?</span> <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> </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>
<form> <form>
<input type="text" id="codeInput"> <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> </form>
{% if not loggedIn %} {% if not loggedIn %}
<a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign In</a> <a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign
<a href="/register" class="sign-in-button" style="text-decoration: none; background: rgb(32, 0, 139)">Register</a><br> In</a>
<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="/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 %} {% else %}
<a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View Dashboard</a> <a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View
<a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign Out</a> Dashboard</a>
<a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign
Out</a>
{% endif %} {% endif %}
</div> </div>
@@ -69,7 +99,7 @@
<script> <script>
//document.getElementById("uploadBtn").addEventListener("click", uploadAnim); //document.getElementById("uploadBtn").addEventListener("click", uploadAnim);
function downloadClick(){ function downloadClick() {
const codeEl = document.getElementById("codeInput"); const codeEl = document.getElementById("codeInput");
const code = codeEl.value; const code = codeEl.value;
// clear input when clicked // clear input when clicked
@@ -95,16 +125,16 @@
<script> <script>
// Client-side quota check before uploading large files // Client-side quota check before uploading large files
(function(){ (function () {
const fileInput = document.getElementById('fileUpload'); const fileInput = document.getElementById('fileUpload');
const uploadBtn = document.getElementById('uploadBtn'); const uploadBtn = document.getElementById('uploadBtn');
const quotaGB = parseFloat(document.getElementById('quotaGB').value) || 0; const quotaGB = parseFloat(document.getElementById('quotaGB').value) || 0;
const usedGB = parseFloat(document.getElementById('quotaUsedGB').value) || 0; const usedGB = parseFloat(document.getElementById('quotaUsedGB').value) || 0;
const remainingGB = Math.max(0, quotaGB - usedGB); const remainingGB = Math.max(0, quotaGB - usedGB);
function ensureFlashesContainer(){ function ensureFlashesContainer() {
let flashes = document.querySelector('.flashes'); let flashes = document.querySelector('.flashes');
if (!flashes){ if (!flashes) {
flashes = document.createElement('ul'); flashes = document.createElement('ul');
flashes.className = 'flashes'; flashes.className = 'flashes';
const app = document.querySelector('.app'); const app = document.querySelector('.app');
@@ -113,12 +143,12 @@
return flashes; return flashes;
} }
function clearClientFlash(){ function clearClientFlash() {
const flashes = document.querySelectorAll('.flashes li.client-quota-warning'); const flashes = document.querySelectorAll('.flashes li.client-quota-warning');
flashes.forEach(n => n.remove()); flashes.forEach(n => n.remove());
} }
function showClientFlash(message){ function showClientFlash(message) {
clearClientFlash(); clearClientFlash();
const flashes = ensureFlashesContainer(); const flashes = ensureFlashesContainer();
const li = document.createElement('li'); const li = document.createElement('li');
@@ -129,14 +159,14 @@
flashes.prepend(li); flashes.prepend(li);
} }
if (fileInput){ if (fileInput) {
fileInput.addEventListener('change', function(e){ fileInput.addEventListener('change', function (e) {
clearClientFlash(); clearClientFlash();
uploadBtn.disabled = false; uploadBtn.disabled = false;
const f = fileInput.files && fileInput.files[0]; const f = fileInput.files && fileInput.files[0];
if (!f) return; if (!f) return;
const fileGB = f.size / (1024 * 1024 * 1024); 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.'); 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 // still allow upload; server will accept but will not set owner when quota insufficient
} else { } else {
@@ -148,5 +178,10 @@
</script> </script>
<script src="{{ url_for('static', filename='script.js') }}"></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> </body>
</html>
</html>