diff --git a/Media.JoshHeaps.Net/Pages/Index.cshtml b/Media.JoshHeaps.Net/Pages/Index.cshtml index c74d66e..f8c3c59 100644 --- a/Media.JoshHeaps.Net/Pages/Index.cshtml +++ b/Media.JoshHeaps.Net/Pages/Index.cshtml @@ -13,11 +13,6 @@

Welcome back, @Model.Dashboard?.Username!

-

Here's your account overview

-
- -
-

Quick Actions

@if (Model.Dashboard?.EmailVerified == false) { @@ -40,17 +35,23 @@ @Model.UploadMessage
} -
+ @Html.AntiForgeryToken()
- - + +
- +
- + +
@@ -89,4 +90,5 @@ @section Scripts { + } \ No newline at end of file diff --git a/Media.JoshHeaps.Net/appsettings.json b/Media.JoshHeaps.Net/appsettings.json index b2fa4e4..5c719a9 100644 --- a/Media.JoshHeaps.Net/appsettings.json +++ b/Media.JoshHeaps.Net/appsettings.json @@ -19,8 +19,5 @@ "MaxFileSizeMB": 10, "AllowedImageTypes": ["image/jpeg", "image/png", "image/gif", "image/webp"], "UploadPath": "App_Data/media" - }, - "Encryption": { - "Key": "***REMOVED***" } } diff --git a/Media.JoshHeaps.Net/wwwroot/css/Home/page.css b/Media.JoshHeaps.Net/wwwroot/css/Home/page.css index 04e4ca5..19892ce 100644 --- a/Media.JoshHeaps.Net/wwwroot/css/Home/page.css +++ b/Media.JoshHeaps.Net/wwwroot/css/Home/page.css @@ -11,10 +11,13 @@ border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; } .welcome-section h1 { - margin: 0 0 10px 0; + margin: 0; font-size: 32px; font-weight: 600; } @@ -91,7 +94,7 @@ display: flex; gap: 10px; flex-wrap: wrap; - margin-top: 20px; + align-content: space-evenly; } .btn { diff --git a/Media.JoshHeaps.Net/wwwroot/css/gallery.css b/Media.JoshHeaps.Net/wwwroot/css/gallery.css index 60467ac..6565c11 100644 --- a/Media.JoshHeaps.Net/wwwroot/css/gallery.css +++ b/Media.JoshHeaps.Net/wwwroot/css/gallery.css @@ -49,6 +49,34 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } +/* Upload Progress Bar */ +#upload-progress { + margin: 15px 0; +} + +.progress-bar { + width: 100%; + height: 30px; + background: #f0f0f0; + border-radius: 15px; + overflow: hidden; + margin-bottom: 10px; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); + transition: width 0.3s ease; + width: 0%; +} + +.progress-text { + text-align: center; + font-size: 14px; + color: #555; + font-weight: 500; +} + .upload-form-header { display: flex; justify-content: space-between; diff --git a/Media.JoshHeaps.Net/wwwroot/js/upload.js b/Media.JoshHeaps.Net/wwwroot/js/upload.js new file mode 100644 index 0000000..710cf37 --- /dev/null +++ b/Media.JoshHeaps.Net/wwwroot/js/upload.js @@ -0,0 +1,106 @@ +// Handle multiple file uploads sequentially +document.addEventListener('DOMContentLoaded', function() { + const uploadForm = document.getElementById('upload-form'); + const fileInput = document.getElementById('UploadedFile'); + const descriptionInput = document.getElementById('Description'); + const uploadBtn = document.getElementById('upload-btn'); + const progressContainer = document.getElementById('upload-progress'); + const progressFill = document.getElementById('progress-fill'); + const progressText = document.getElementById('progress-text'); + const galleryElement = document.getElementById('gallery'); + + if (!uploadForm) return; + + uploadForm.addEventListener('submit', async function(e) { + e.preventDefault(); + + const files = fileInput.files; + if (!files || files.length === 0) { + alert('Please select at least one file'); + return; + } + + // Validate file sizes + const maxSize = 10 * 1024 * 1024; // 10MB + for (let file of files) { + if (file.size > maxSize) { + alert(`File "${file.name}" exceeds 10MB limit`); + return; + } + } + + // Disable form during upload + uploadBtn.disabled = true; + fileInput.disabled = true; + descriptionInput.disabled = true; + progressContainer.style.display = 'block'; + + const description = descriptionInput.value; + let successCount = 0; + let failCount = 0; + + // Upload files sequentially + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const progress = Math.round(((i + 1) / files.length) * 100); + + progressFill.style.width = `${progress}%`; + progressText.textContent = `Uploading ${i + 1} of ${files.length}: ${file.name}`; + + try { + const success = await uploadSingleFile(file, description); + if (success) { + successCount++; + } else { + failCount++; + } + } catch (error) { + console.error(`Failed to upload ${file.name}:`, error); + failCount++; + } + } + + // Reset form + uploadBtn.disabled = false; + fileInput.disabled = false; + descriptionInput.disabled = false; + progressContainer.style.display = 'none'; + progressFill.style.width = '0%'; + + // Show results + if (successCount > 0 && failCount === 0) { } + else if (successCount > 0 && failCount > 0) { + alert(`Uploaded ${successCount} image(s), but ${failCount} failed.`); + } else { + alert(`Failed to upload all ${failCount} image(s).`); + } + + // Reset form and reload page + uploadForm.reset(); + window.location.reload(); + }); + + async function uploadSingleFile(file, description) { + const formData = new FormData(); + formData.append('UploadedFile', file); + if (description) { + formData.append('Description', description); + } + + // Get anti-forgery token + const token = document.querySelector('input[name="__RequestVerificationToken"]').value; + formData.append('__RequestVerificationToken', token); + + try { + const response = await fetch('/?handler=Add', { + method: 'POST', + body: formData + }); + + return response.ok; + } catch (error) { + console.error('Upload error:', error); + return false; + } + } +});