added ability to know something's actually happening on the upload server page.

This commit is contained in:
Storm Dragon
2025-07-18 23:01:01 -04:00
parent b0533ffaaa
commit a57ff6ac77

View File

@@ -182,6 +182,18 @@
.upload-section:last-child {
border-bottom: none;
}
/* Upload feedback styles */
.btn:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
.upload-status {
margin-top: 10px;
font-weight: bold;
color: var(--primary-color);
}
</style>
</head>
<body>
@@ -222,6 +234,7 @@
<div class="form-group">
<button type="submit" class="btn" id="upload-button">Upload Files</button>
<div id="upload-status" class="upload-status" style="display: none;" aria-live="polite"></div>
</div>
</form>
</section>
@@ -245,6 +258,7 @@
<div class="form-group">
<button type="submit" class="btn" id="upload-folder-button">Upload Music Folder</button>
<div id="upload-folder-status" class="upload-status" style="display: none;" aria-live="polite"></div>
</div>
</form>
</section>
@@ -356,6 +370,34 @@
}, false);
}
// Upload progress handling
function setupUploadProgress(formSelector, buttonId, statusId) {
const form = document.querySelector(formSelector);
const button = document.getElementById(buttonId);
const status = document.getElementById(statusId);
const announcer = document.getElementById('status-announcer');
form.addEventListener('submit', function(e) {
// Disable button and show status
button.disabled = true;
button.textContent = 'Uploading...';
status.style.display = 'block';
status.textContent = 'Upload in progress, please wait...';
// Announce to screen readers
announcer.textContent = 'Upload started, please wait while files are being processed';
// Add a small delay to ensure the status is visible before form submits
setTimeout(() => {
// Form will submit naturally
}, 100);
});
}
// Set up progress handling for both forms
setupUploadProgress('form[action="/upload"]', 'upload-button', 'upload-status');
setupUploadProgress('form[action="/upload_music"]', 'upload-folder-button', 'upload-folder-status');
// Check if the client is on local network
fetch('/check_local')
.then(response => {