mbkbucket 3.0.0 → 3.1.0

package/src/controllers/api.controller.js

@@ -34,7 +34,9 @@ function resolvePrefix(req, res, prefix) {
  * Build a full S3 key from a prefix and filename, stripping trailing slashes.
  */
 function buildKey(prefix, fileName) {
-  return `${prefix.replace(/\/+$/, '')}/${fileName}`;
+  const cleanPrefix = String(prefix || '').replace(/^\/+/, '').replace(/\/+$/, '');
+  const cleanName = String(fileName || '').replace(/^\/+/, '');
+  return cleanPrefix ? `${cleanPrefix}/${cleanName}` : cleanName;
 }
 
 async function cleanupFolderMarker(folderPath, bucketName) {
@@ -121,8 +123,8 @@ export async function listFiles(req, res) {
     let legacyFallback = false;
 
     if (useOptimizedListing) {
-      let listPrefix = effectivePrefix;
-      if (listPrefix === getAppName() && !listPrefix.endsWith('/')) {
+      let listPrefix = effectivePrefix ? String(effectivePrefix).replace(/^\/+/, '') : '';
+      if (listPrefix && !listPrefix.endsWith('/')) {
         listPrefix += '/';
       }
 
@@ -135,11 +137,12 @@ export async function listFiles(req, res) {
 
       files = (result.Contents || []).filter(f => !f.Key.endsWith('/'));
       folders = (result.CommonPrefixes || [])
-        .filter(p => p.Prefix !== effectivePrefix)
+        .filter(p => p.Prefix !== listPrefix && p.Prefix !== effectivePrefix)
         .map(p => p.Prefix);
       nextContinuationToken = result.NextContinuationToken;
+    }
 
-    } else {
+    else {
       let continuationToken = undefined;
 
       do {
@@ -350,7 +353,14 @@ export async function createFolder(req, res) {
     const effectivePrefix = resolvePrefix(req, res, prefix);
     if (effectivePrefix === null) return;
 
-    const folderKey = `${effectivePrefix.replace(/\/+$/, '')}/${folderName}/`;
+    const cleanName = String(folderName).replace(/^\/+/, '').replace(/\/+$/, '');
+    let folderKey;
+    if (effectivePrefix && !cleanName.startsWith(effectivePrefix)) {
+      const cleanPrefix = effectivePrefix.replace(/\/+$/, '');
+      folderKey = `${cleanPrefix}/${cleanName}/`;
+    } else {
+      folderKey = `${cleanName}/`;
+    }
 
     const markerExists = await fileExists(folderKey, bucketName);
     if (markerExists) return res.status(409).json({ success: false, error: 'Folder already exists' });

package/views/bucket.handlebars

@@ -7,7 +7,7 @@
     <title>{{#if page}}{{page}} - {{/if}}Web Portal</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script src="/mbkauthe/main.js" defer></script>
     <script src="https://portal.mbktech.org/Assets/Scripts/auto-ids.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@@ -26,26 +26,34 @@
             --warning-color-ml: #d97706;
             --success-color-ml: #16a34a;
             --info-color-ml: #3b82f6;
-            --border-radius-r-ml: 0.5rem;
-            --border-radius-sm-ml: 0.25rem;
-            --border-radius-lg-ml: 0.75rem;
-            --shadow-s-ml: 0 2px 4px rgba(0, 0, 0, 0.1);
-            --shadow-md-ml: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --shadow-lg-ml: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            --transition-base-ml: all 0.2s ease;
-            --transition-fast-ml: all 0.15s ease;
-            --main-border-color: var(--gray-light-color-ml);
-            --color-accent: var(--primary-color-ml);
-            --color-text: var(--dark-color-ml);
-            --color-bg: var(--light-color-ml);
+
+            --primary: var(--primary-color-ml);
+            --primary-lt: var(--primary-light-color-ml);
+            --primary-dk: var(--primary-dark-color-ml);
+            --primary-hover: #0d635c;
+
+            --body-bg: var(--light-color-ml);
+            --bg-surface: rgba(255, 255, 255, 0.88);
+            --bg-surface-secondary: rgba(244, 247, 243, 0.7);
+            --bg-surface-tertiary: #e9f2ee;
+
+            --border-color: rgba(15, 118, 110, 0.15);
+            --border-color-light: rgba(15, 118, 110, 0.08);
+
+            --text: var(--dark-color-ml);
+            --text-secondary: #4a5c5a;
+            --text-muted: var(--gray-color-ml);
+            --text-disabled: #a0b2af;
+
             --font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-            --font-family-headings: "Sora", "Segoe UI", sans-serif
+            --font-family-headings: "Sora", "Segoe UI", sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
 
         * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box
+            box-sizing: border-box;
         }
 
         body {
@@ -61,7 +69,7 @@
             line-height: 1.6;
             font-size: 14px;
             position: relative;
-            isolation: isolate
+            isolation: isolate;
         }
 
         body::before,
@@ -70,7 +78,7 @@
             position: fixed;
             border-radius: 999px;
             pointer-events: none;
-            z-index: -1
+            z-index: -1;
         }
 
         body::before {
@@ -78,7 +86,7 @@
             height: 260px;
             left: -80px;
             top: 18vh;
-            background: radial-gradient(circle, rgba(15, 118, 110, 0.16) 0, rgba(15, 118, 110, 0) 70%)
+            background: radial-gradient(circle, rgba(15, 118, 110, 0.16) 0, rgba(15, 118, 110, 0) 70%);
         }
 
         body::after {
@@ -86,23 +94,7 @@
             height: 300px;
             right: -120px;
             bottom: 10vh;
-            background: radial-gradient(circle, rgba(251, 146, 60, 0.18) 0, rgba(251, 146, 60, 0) 72%)
-        }
-
-        /* Removed unused sidebar/menu styles to reduce CSS size. */
-
-        .logo {
-            font-family: var(--font-family-headings);
-            font-size: 1.65rem;
-            font-weight: 700;
-            color: #0b4f4a;
-            display: flex;
-            align-items: center;
-            gap: .5rem
-        }
-
-        .logo img {
-            width: 35px
+            background: radial-gradient(circle, rgba(251, 146, 60, 0.18) 0, rgba(251, 146, 60, 0) 72%);
         }
 
         .main-content {
@@ -110,7 +102,7 @@
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            transition: var(--transition-base-ml)
+            min-height: 100vh;
         }
 
         .top-nav {
@@ -119,139 +111,77 @@
             padding: .75rem 1.5rem;
             display: flex;
             align-items: center;
-            justify-content: flex-end;
-            box-shadow: var(--shadow-md-ml);
+            justify-content: space-between;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
             z-index: 90;
             border-bottom: 1px solid rgba(255, 255, 255, .75);
-            gap: 1rem
+            gap: 1rem;
         }
 
-        /* Removed unused notification and profile styles to reduce CSS size. */
+        .logo {
+            font-family: var(--font-family-headings);
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #0b4f4a;
+            display: flex;
+            align-items: center;
+            gap: .5rem;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .logo img {
+            width: 32px;
+            height: 32px;
+        }
 
         .content-area {
             flex: 1;
-            padding: 1.6rem;
-            overflow-y: auto
+            padding: 1.5rem;
+            overflow-y: auto;
         }
 
         .content-area::-webkit-scrollbar {
-            width: 8px
+            width: 8px;
         }
 
         .content-area::-webkit-scrollbar-track {
-            background: 0 0
+            background: transparent;
         }
 
         .content-area::-webkit-scrollbar-thumb {
             background: var(--gray-color-ml);
-            border-radius: 4px
+            border-radius: 4px;
         }
 
         .content-area::-webkit-scrollbar-thumb:hover {
-            background: var(--primary-color-ml)
+            background: var(--primary-color-ml);
         }
 
-        .page-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 1.2rem;
-            padding: 1rem 1.2rem;
-            border: 1px solid rgba(255, 255, 255, .9);
-            border-radius: 1rem;
-            background: rgba(255, 255, 255, .74);
-            box-shadow: 0 12px 34px rgba(15, 23, 42, .07)
-        }
-
-        .page-title {
-            font-family: var(--font-family-headings);
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--dark-color-ml);
-            margin: 0
-        }
-
-        .breadcrumb {
-            display: flex;
-            align-items: center;
-            color: var(--gray-color-ml);
-            font-size: .875rem;
-            background: linear-gradient(135deg, rgba(15, 118, 110, .08), rgba(251, 146, 60, .08));
-            padding: .4rem .85rem;
-            border-radius: 999px;
-            border: 1px solid rgba(15, 118, 110, .15)
-        }
-
-        .breadcrumb a {
-            color: var(--primary-color-ml);
-            text-decoration: none;
-            transition: var(--transition-base-ml);
-            font-weight: 500
-        }
-
-        .breadcrumb a:hover {
-            color: var(--primary-dark-color-ml)
-        }
-
-        .breadcrumb .separator {
-            margin: 0 .5rem;
-            color: var(--gray-color-ml)
-        }
-
-        @media (max-width:992px) {
-            .main-content {
-                margin-left: 0 !important
-            }
-
-            .content-area {
-                padding: 1.5rem
-            }
-        }
-
-        @media (max-width:768px) {
+        @media (max-width: 768px) {
             .top-nav {
-                padding: .25rem 1rem
+                padding: .5rem 1rem;
             }
-
             .content-area {
-                padding: 1rem
-            }
-
-            .page-header {
-                flex-direction: row;
-                align-items: flex-start;
-                gap: 1rem
-            }
-
-            .page-title {
-                font-size: 1.5rem
+                padding: 0.85rem;
             }
         }
-
-
     </style>
     {{> showmessage }}
 </head>
 
 <body>
-
     <div class="main-content">
         <nav class="top-nav">
-            <div class="logo">
-                <img onclick="window.location='/mbkbucket'" src="/icon.svg" alt="Logo">
-                <span onclick="window.location='/mbkbucket'" style="cursor:pointer;">BKBucket</span>
+            <div class="logo" onclick="window.location='/mbkbucket'">
+                <img src="/icon.svg" alt="Logo">
+                <span>MBKBucket</span>
             </div>
 
             {{> profilemenu }}
         </nav>
 
         <div class="content-area">
-            <div class="page-header">
-                <h1 class="page-title">{{#if page}}{{page}}{{else}}Dashboard{{/if}}</h1>
-                <div class="breadcrumb">
-                    <span>{{#if page}}{{page}}{{else}}Home{{/if}}</span>
-                </div>
-            </div>
             {{> bucketadmincontent }}
         </div>
     </div>

package/views/bucketadmin_delete_modal.handlebars

@@ -1,37 +1,33 @@
 <!-- Delete Confirmation Modal -->
 <div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="deleteModalLabel">
-          <i class="fas fa-exclamation-triangle"></i>
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="var(--red)" stroke-width="1.5" class="modal-title-icon"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
           Confirm Delete
         </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-          onclick="closeModal()">&times;</button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal()">&times;</button>
       </div>
-      <div class="modal-body">
-        <i class="fas fa-trash-alt fa-3x"></i>
-        <h6>Are you sure you want to delete this file?</h6>
-        <p class="modal-body-text-style">
-          <strong id="deleteFileName" style="color: var(--dark-color-ml);"></strong>
-        </p>
-        <p class="modal-body-text-top">
-          <small>This action cannot be undone.</small>
+      <div class="modal-body text-center py-4">
+        <div class="delete-icon-wrap mb-3">
+          <svg width="44" height="44" viewBox="0 0 16 16" fill="none" stroke="var(--red)" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
+        </div>
+        <h6 class="modal-confirm-heading">Are you sure you want to delete this?</h6>
+        <p class="modal-item-name-preview mt-2">
+          <code id="deleteFileName"></code>
         </p>
+        <p class="text-muted small mt-2">This action cannot be undone.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" onclick="closeModal()">
-          <i class="fas fa-times"></i>
-          Cancel
-        </button>
+        <button type="button" class="btn btn-outline" onclick="closeModal()">Cancel</button>
         <form id="deleteForm" method="post" action="/mbkbucket/delete" style="display: inline;">
           <input type="hidden" name="key" id="deleteKey">
           <input type="hidden" name="prefix" value="{{prefix}}">
           <input type="hidden" name="folder" id="deleteIsFolder" value="">
           <button type="submit" class="btn btn-danger" id="deleteConfirmButton">
-            <i class="fas fa-trash"></i>
-            <span id="deleteConfirmLabel">Delete File</span>
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
+            <span id="deleteConfirmLabel">Delete</span>
           </button>
         </form>
       </div>

package/views/bucketadmin_filelist_skeleton.handlebars

@@ -1,20 +1,32 @@
-<div class="table-responsive" aria-label="Loading files" aria-busy="true">
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+<div class="fm-skeleton-grid" aria-label="Loading files" aria-busy="true">
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
 </div>

package/views/bucketadmin_newfolder_modal.handlebars

@@ -0,0 +1,29 @@
+<!-- New Folder Modal -->
+<div class="modal" id="newFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="newFolderModalLabel">
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/><path d="M8 7v4M6 9h4"/></svg>
+          New Folder
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeNewFolderModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form id="newFolderForm" onsubmit="event.preventDefault(); submitCreateFolder();">
+          <div class="modal-form-row">
+            <label for="newFolderNameInput" class="form-label">Folder Name</label>
+            <input type="text" id="newFolderNameInput" class="form-control" placeholder="e.g. documents, images, backup" autocomplete="off" required>
+            <div class="form-text">Folders are created in the current directory path.</div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" onclick="closeNewFolderModal()">Cancel</button>
+        <button type="button" class="btn btn-primary" id="submitNewFolderBtn" onclick="submitCreateFolder()">
+          Create Folder
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/views/bucketadmin_preview_modal.handlebars

@@ -1,31 +1,38 @@
 <!-- Preview Modal -->
 <div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
-  <div class="modal-dialog preview-modal-dialog" role="document">
+  <div class="modal-dialog modal-dialog-centered preview-modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="previewModalLabel"><i class="fas fa-eye"></i> <span
-            id="previewFileName">Preview</span></h5>
+        <h5 class="modal-title" id="previewModalLabel">
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2.5"/></svg>
+          <span id="previewFileName">Preview</span>
+        </h5>
         <div class="preview-header-controls">
-          <button id="previewFullscreenBtn" class="btn btn-outline-secondary btn-sm" type="button"
-            aria-label="Toggle fullscreen"><i class="fas fa-expand"></i></button>
-          <button type="button" class="btn-close" aria-label="Close preview" id="previewCloseBtn">&times;</button>
+          <button id="previewFullscreenBtn" class="btn btn-icon btn-outline btn-sm" type="button" aria-label="Toggle fullscreen" title="Fullscreen">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 5V2h3M14 5V2h-3M2 11v3h3M14 11v3h-3"/></svg>
+          </button>
+          <button type="button" class="btn-close" aria-label="Close preview" id="previewCloseBtn" onclick="closePreviewModal()">&times;</button>
         </div>
       </div>
-      <div class="modal-body">
+      <div class="modal-body p-0">
         <div class="preview-content" id="previewContent" aria-live="polite">
           <div class="empty-preview">
-            <i class="fas fa-spinner fa-spin"></i>
-            <div class="modal-header-spacing">Loading preview...</div>
+            <div class="spinner-border" role="status"></div>
+            <div class="modal-header-spacing mt-2">Loading preview...</div>
           </div>
         </div>
       </div>
       <div class="modal-footer preview-footer">
         <div class="preview-actions">
-          <a id="previewOpenBtn" class="btn btn-outline-secondary" target="_blank" rel="noopener noreferrer" href="#"><i
-              class="fas fa-external-link-alt"></i> Open</a>
-          <a id="previewDownloadBtn" class="btn btn-success" download href="#"><i class="fas fa-download"></i>
-            Download</a>
-          <button type="button" class="btn btn-secondary" id="previewCloseFooter">Close</button>
+          <a id="previewOpenBtn" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer" href="#">
+            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3M10 2h4v4M9 7l5-5"/></svg>
+            Open in new tab
+          </a>
+          <a id="previewDownloadBtn" class="btn btn-primary btn-sm" download href="#">
+            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
+            Download
+          </a>
+          <button type="button" class="btn btn-outline btn-sm" id="previewCloseFooter" onclick="closePreviewModal()">Close</button>
         </div>
       </div>
     </div>

package/views/bucketadmin_upload_modal.handlebars

@@ -0,0 +1,54 @@
+<!-- Upload Modal -->
+<div class="modal" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="uploadModalLabel">
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="modal-title-icon"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
+          Upload Files
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeUploadModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form id="uploadForm" action="/mbkbucket/upload" method="post" enctype="multipart/form-data">
+          <input type="hidden" name="prefix" value="{{prefix}}" id="uploadPrefixInput">
+
+          <!-- Drop Zone -->
+          <div id="dropZone" class="upload-drop-zone">
+            <div class="drop-zone-content">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="drop-icon"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+              <div class="drop-text">Drag files here, or <span class="drop-browse-link">browse</span></div>
+              <div class="drop-hint">Supports multiple files &amp; large chunked uploads</div>
+            </div>
+            <input type="file" class="form-control d-none" id="fileInput" name="files" multiple>
+          </div>
+
+          <!-- Upload Queue List -->
+          <div id="uploadQueue" class="upload-queue mt-3"></div>
+
+          <!-- Upload Progress -->
+          <div id="uploadProgress" class="upload-progress-container mt-3" style="display: none;">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+              <span class="upload-status-label" id="uploadStatusLabel">Uploading...</span>
+              <span id="uploadPercent" class="upload-percent">0%</span>
+            </div>
+            <div class="progress-bar-wrap">
+              <div id="progressBar" class="progress-bar-inner" style="width: 0%;"></div>
+            </div>
+            <div class="upload-meta-info mt-1">
+              <small id="uploadDetails" class="text-muted"></small>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" onclick="closeUploadModal()">Cancel</button>
+        <button type="button" class="btn btn-outline" id="clearQueueBtn" style="display: none;">Clear Queue</button>
+        <button type="button" class="btn btn-primary" id="startUploadBtn">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>
+          Start Upload
+        </button>
+      </div>
+    </div>
+  </div>
+</div>