Reformatting

Media.JoshHeaps.Net/Pages/Index.cshtml

@@ -13,11 +13,6 @@
 <div class="dashboard-container">
     <div class="welcome-section">
         <h1>Welcome back, @Model.Dashboard?.Username!</h1>
-        <p>Here's your account overview</p>
-    </div>
-
-    <div class="card">
-        <h2>Quick Actions</h2>
         <div class="quick-actions">
             @if (Model.Dashboard?.EmailVerified == false)
             {
@@ -40,17 +35,23 @@
                 @Model.UploadMessage
             </div>
         }
-        <form method="post" enctype="multipart/form-data">
+        <form method="post" enctype="multipart/form-data" id="upload-form">
             @Html.AntiForgeryToken()
             <div class="form-group">
-                <label for="UploadedFile">Select Image</label>
+                <label for="UploadedFile">Select Image(s)</label>
-                <input type="file" id="UploadedFile" name="UploadedFile" accept="image/*" required />
+                <input type="file" id="UploadedFile" name="UploadedFile" accept="image/*" multiple required />
             </div>
             <div class="form-group">
                 <label for="Description">Description (optional)</label>
-                <textarea id="Description" name="Description" rows="3" placeholder="Add a description..."></textarea>
+                <textarea id="Description" name="Description" rows="3" placeholder="Add a description for all images..."></textarea>
             </div>
-            <button type="submit" class="btn btn-primary" asp-page-handler="Add">Upload</button>
+            <div id="upload-progress" style="display:none;">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <div class="progress-text" id="progress-text">Uploading...</div>
+            </div>
+            <button type="submit" class="btn btn-primary" id="upload-btn">Upload</button>
         </form>
     </div>
 
@@ -89,4 +90,5 @@
 
 @section Scripts {
     <script src="~/js/gallery.js" asp-append-version="true"></script>
+    <script src="~/js/upload.js" asp-append-version="true"></script>
 }

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***"
   }
 }

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 {

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;

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;
+        }
+    }
+});