npm - mbkbucket - Versions diffs - 3.5.1 → 3.6.0 - Mend

mbkbucket 3.5.1 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/.env.example +14 -14
package/.mbkbucket.config.example.json +14 -14
package/LICENSE +20 -20
package/README.md +377 -350
package/index.js +30 -30
package/lib/cli.js +649 -649
package/lib/public/bucketadmin.css +1420 -1420
package/lib/public/bucketadmin.js +1229 -1229
package/lib/public/mbkbucket-helper-demo.html +1184 -1184
package/lib/public/mbkbucket-helper.css +1235 -1235
package/lib/public/mbkbucket-helper.js +1557 -1557
package/lib/src/app.js +109 -109
package/lib/src/cli/auth-helper.js +150 -150
package/lib/src/config/index.js +112 -112
package/lib/src/config/validation.js +73 -73
package/lib/src/controllers/api.controller.js +410 -410
package/lib/src/controllers/dashboard.controller.js +48 -48
package/lib/src/controllers/info.controller.js +34 -34
package/lib/src/controllers/view.controller.js +233 -233
package/lib/src/middleware/async-handler.js +23 -23
package/lib/src/middleware/bucket-resolver.js +37 -37
package/lib/src/middleware/error-handler.js +54 -54
package/lib/src/middleware/rate-limiter.js +22 -22
package/lib/src/middleware/security.js +27 -27
package/lib/src/routes/api.routes.js +54 -40
package/lib/src/routes/index.js +40 -21
package/lib/src/routes/info.routes.js +9 -9
package/lib/src/routes/view.routes.js +25 -20
package/lib/src/services/s3.service.js +603 -603
package/lib/src/utils/errors.js +54 -54
package/lib/src/utils/helpers.js +251 -251
package/lib/src/utils/logger.js +17 -17
package/package.json +83 -83
package/views/bucket.handlebars +196 -196
package/views/bucketadmin_alerts.handlebars +15 -15
package/views/bucketadmin_delete_modal.handlebars +36 -36
package/views/bucketadmin_filelist_skeleton.handlebars +32 -32
package/views/bucketadmin_newfolder_modal.handlebars +29 -29
package/views/bucketadmin_preview_modal.handlebars +40 -40
package/views/bucketadmin_upload_modal.handlebars +54 -54
package/views/bucketadmincontent.handlebars +141 -141
package/views/mbkbucket_info.handlebars +232 -232

package/views/bucketadmin_delete_modal.handlebars CHANGED Viewed

@@ -1,36 +1,36 @@
-<!-- Delete Confirmation Modal -->
-<div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="deleteModalLabel">
-          <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>
-      </div>
-      <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-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">
-            <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>
-    </div>
-  </div>
-</div>
+<!-- Delete Confirmation Modal -->
+<div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="deleteModalLabel">
+          <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>
+      </div>
+      <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-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">
+            <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>
+    </div>
+  </div>
+</div>

package/views/bucketadmin_filelist_skeleton.handlebars CHANGED Viewed

@@ -1,32 +1,32 @@
-<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="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 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>
+<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="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 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 CHANGED Viewed

@@ -1,29 +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>
+<!-- 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 CHANGED Viewed

@@ -1,40 +1,40 @@
-<!-- Preview Modal -->
-<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
-  <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">
-          <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-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 p-0">
-        <div class="preview-content" id="previewContent" aria-live="polite">
-          <div class="empty-preview">
-            <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 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>
-  </div>
-</div>
+<!-- Preview Modal -->
+<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
+  <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">
+          <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-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 p-0">
+        <div class="preview-content" id="previewContent" aria-live="polite">
+          <div class="empty-preview">
+            <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 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>
+  </div>
+</div>

package/views/bucketadmin_upload_modal.handlebars CHANGED Viewed

@@ -1,54 +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>
+<!-- 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>