mbkbucket 1.2.1 → 1.4.0

package/public/bucketadmin.js

@@ -7,6 +7,7 @@ let currentOrder = 'asc';
 let currentViewMode = 'folder'; // 'folder' or 'flat'
 let pageFiles = [];
 let pageFolders = [];
+let currentNextToken = null;
 const bucketAppName = document.getElementById('bucketAppData')?.dataset.appName || '';
 // Bucket is configured centrally on the server; client should not select a bucket.
 
@@ -70,7 +71,7 @@ function showAlert(message, type = 'success') {
 }
 
 // Fetch and render files
-async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort, order = currentOrder) {
+async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort, order = currentOrder, token = '') {
     currentPage = page;
     currentPrefix = prefix;
     currentSearch = search;
@@ -109,19 +110,13 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
           <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-80"></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-80"></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-80"></div>
+          <div class="skeleton-box s-200"></div>
         </div>
       </div>
     `;
@@ -129,15 +124,28 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
     try {
         const searchParam = search ? `&search=${encodeURIComponent(search)}` : '';
         const sortParam = `&sort=${sort}&order=${order}`;
-        const response = await fetch(`/mbkbucket/api/files?page=${page}&prefix=${encodeURIComponent(prefix)}${searchParam}${sortParam}`);
+        
+        // Determine recursive mode
+        const isFolderMode = currentViewMode === 'folder';
+        const recursiveParam = `&recursive=${!isFolderMode}`; // false if folder mode, true if flat mode
+        const tokenParam = token ? `&token=${encodeURIComponent(token)}` : '';
+
+        const response = await fetch(`/mbkbucket/api/files?page=${page}&prefix=${encodeURIComponent(prefix)}${searchParam}${sortParam}${recursiveParam}${tokenParam}`);
         const data = await response.json();
 
         if (!data.success) {
             throw new Error(data.error || 'Failed to load files');
         }
+        
+        // Store next token
+        currentNextToken = data.nextContinuationToken || null;
 
         // Update stats
-        totalFilesCount.textContent = `${data.totalFiles} ${search ? 'Results' : 'Files'}`;
+        if (data.totalFiles === -1) {
+             totalFilesCount.textContent = `${(data.files.length + (data.folders ? data.folders.length : 0))}${data.hasNextPage ? '+' : ''} Items`;
+        } else {
+             totalFilesCount.textContent = `${data.totalFiles} ${search ? 'Results' : 'Files'}`;
+        }
 
         if (search) {
             filterInfo.textContent = `Search results for: "${search}"`;
@@ -149,7 +157,9 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         }
 
         // Render files or empty state
-        if (data.files.length === 0 && !prefix) {
+        const hasContent = (data.files && data.files.length > 0) || (data.folders && data.folders.length > 0);
+
+        if (!hasContent && !prefix && !search) {
             container.innerHTML = `
           <div class="empty-state">
             <i class="fas fa-folder-open"></i>
@@ -163,11 +173,13 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
             paginationContainer.style.display = 'none';
         } else {
             // Store for client-side sorting and view switching
-            pageFiles = data.files;
+            pageFiles = data.files || [];
 
-            // Only calculate folders if we are in search or folder mode (for potential future switching)
-            // But mainly we rely on currentViewMode in the render function
-            pageFolders = search ? [] : extractFoldersAtCurrentLevel(data.files, prefix);
+            if (data.mode === 'optimized') {
+                 pageFolders = data.folders || [];
+            } else {
+                 pageFolders = search ? [] : extractFoldersAtCurrentLevel(data.files, prefix);
+            }
 
             renderFilesTable(pageFiles, pageFolders, prefix);
             renderPagination(data);
@@ -335,6 +347,9 @@ function renderFilesTable(files, folders = [], prefix = '') {
             // 1. Show files where FILENAME matches the search term
             const searchLower = currentSearch.toLowerCase();
             displayFiles = files.filter(f => {
+                // Skip folder marker objects (keys ending with /)
+                if (f.Key.endsWith('/')) return false;
+                
                 const fileName = f.Key.split('/').pop();
                 return fileName.toLowerCase().includes(searchLower);
             });
@@ -343,13 +358,17 @@ function renderFilesTable(files, folders = [], prefix = '') {
             displayFolders = extractMatchingFolders(files, currentSearch);
         } else {
             // Normal Flat Mode: Show all files, no folders
-            displayFiles = files;
+            // Filter out folder marker objects (keys ending with /)
+            displayFiles = files.filter(f => !f.Key.endsWith('/'));
             displayFolders = [];
         }
     } else {
         // Normal Folder View logic
         // Filter files to show only those at current level (not in subfolders)
         displayFiles = files.filter(file => {
+            // Skip folder marker objects (keys ending with /)
+            if (file.Key.endsWith('/')) return false;
+            
             const relativePath = prefix ? file.Key.substring(prefix.length + (prefix.endsWith('/') ? 0 : 1)) : file.Key;
             // File is at current level if it has no '/' in relative path
             return !relativePath.includes('/');
@@ -400,7 +419,10 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
     // Generate folder rows (only used in folder mode)
     const folderRows = displayFolders.map(folderPath => {
-        const folderName = folderPath.split('/').pop();
+        // Handle folder paths which typically end in a slash (e.g., "folder/subfolder/")
+        const cleanPath = folderPath.replace(/\/+$/, ''); 
+        const folderName = cleanPath.split('/').pop();
+        
         return `
         <tr class="folder-row" onclick="loadFiles(1, '${folderPath}')" title="Open folder: ${folderName}">
           <td style="text-align:center;">
@@ -453,10 +475,10 @@ function renderFilesTable(files, folders = [], prefix = '') {
             folderPath = fullPath.substring(0, lastSlashIndex + 1); // include trailing slash
         }
 
-        const iconClass = getFileIcon(filename);
-        const typeCategory = getFileTypeCategory(filename);
-        const truncatedName = truncateFileName(filename);
-        const isFileViewable = isViewable(filename);
+        const iconClass = window.getFileIcon ? window.getFileIcon(filename) : 'fas fa-file';
+        const typeCategory = window.getFileTypeCategory ? window.getFileTypeCategory(filename) : '';
+        const truncatedName = (window.truncateFileName ? window.truncateFileName(filename) : filename) || filename;
+        const isFileViewable = window.isViewable ? window.isViewable(filename) : false;
 
         // If in flat mode, we might want to show the folder path more prominently
         const pathDisplay = (currentViewMode === 'flat' && folderPath && folderPath !== prefix + (prefix ? '/' : ''))
@@ -493,6 +515,9 @@ function renderFilesTable(files, folders = [], prefix = '') {
                 data-key-enc="${encodedKey}" title="${isFileViewable ? 'View file in browser' : 'File type not supported for viewing'}" ${!isFileViewable ? 'disabled style="opacity:0.5"' : ''}>
                 <i class="fas fa-eye"></i>
               </button>
+              <button type="button" class="btn btn-info btn-sm copy-btn" data-key-enc="${encodedKey}" title="Copy Link" style="color:white;">
+                <i class="fas fa-link"></i>
+              </button>
               <a href="/mbkbucket/download/${encodedKey}" class="btn btn-success btn-sm"
                 title="Download file">
                 <i class="fas fa-download"></i>
@@ -587,63 +612,137 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
 // Render pagination
 function renderPagination(data) {
-    const { currentPage, totalPages, hasPrevPage, hasNextPage } = data;
+    const { currentPage, totalPages, hasPrevPage, hasNextPage, mode } = data;
 
     let paginationHTML = '';
 
-    // Previous button
-    if (hasPrevPage) {
-        paginationHTML += `
-        <li class="page-item">
-          <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage - 1}, '${currentPrefix}', '${currentSearch}')">
-            <i class="fas fa-chevron-left"></i> Previous
-          </a>
-        </li>
-      `;
-    } else {
+    if (mode === 'optimized') {
+        // Optimized Mode: Token-based pagination (Next only, limited Prev)
+        
+        // Previous button (Disabled for now as we don't track history stack of tokens)
         paginationHTML += `
         <li class="page-item disabled">
-          <span class="page-link">
+          <span class="page-link" title="Previous page not supported in optimized view">
             <i class="fas fa-chevron-left"></i> Previous
           </span>
         </li>
       `;
-    }
-
-    // Page numbers
-    for (let i = 1; i <= totalPages; i++) {
-        if (i === currentPage) {
-            paginationHTML += `
+      
+      // Current Page Indicator
+      paginationHTML += `
           <li class="page-item active">
-            <span class="page-link">${i}</span>
+            <span class="page-link">${currentPage}</span>
           </li>
-        `;
-        } else {
-            paginationHTML += `
+      `;
+
+      // Next button
+      if (hasNextPage) {
+          // Quote the token correctly
+          const tokenStr = currentNextToken ? currentNextToken.replace(/'/g, "\\'") : "";
+          paginationHTML += `
           <li class="page-item">
-            <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${i}, '${currentPrefix}', '${currentSearch}')">${i}</a>
+            <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}', '${currentSort}', '${currentOrder}', '${tokenStr}')">
+              Next <i class="fas fa-chevron-right"></i>
+            </a>
           </li>
         `;
-        }
-    }
+      } else {
+          paginationHTML += `
+          <li class="page-item disabled">
+            <span class="page-link">
+              Next <i class="fas fa-chevron-right"></i>
+            </span>
+          </li>
+        `;
+      }
 
-    // Next button
-    if (hasNextPage) {
-        paginationHTML += `
-        <li class="page-item">
-          <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}')">
-            Next <i class="fas fa-chevron-right"></i>
-          </a>
-        </li>
-      `;
     } else {
-        paginationHTML += `
-        <li class="page-item disabled">
-          <span class="page-link">
-            Next <i class="fas fa-chevron-right"></i>
-          </span>
-        </li>
-      `;
+        // Legacy Mode: Numbered pagination
+        
+        // Previous button
+        if (hasPrevPage) {
+            paginationHTML += `
+            <li class="page-item">
+              <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage - 1}, '${currentPrefix}', '${currentSearch}')">
+                <i class="fas fa-chevron-left"></i> Previous
+              </a>
+            </li>
+          `;
+        } else {
+            paginationHTML += `
+            <li class="page-item disabled">
+              <span class="page-link">
+                <i class="fas fa-chevron-left"></i> Previous
+              </span>
+            </li>
+          `;
+        }
+
+        // Smart Page Numbers (limit visible pages)
+        const maxPagesToShow = 7;
+        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+        let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+        
+        if (endPage - startPage + 1 < maxPagesToShow) {
+            startPage = Math.max(1, endPage - maxPagesToShow + 1);
+        }
+
+        // First page
+        if (startPage > 1) {
+             paginationHTML += `
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(1, '${currentPrefix}', '${currentSearch}')">1</a>
+            </li>`;
+            if (startPage > 2) {
+                 paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+        }
+
+        for (let i = startPage; i <= endPage; i++) {
+            if (i === currentPage) {
+                paginationHTML += `
+              <li class="page-item active">
+                <span class="page-link">${i}</span>
+              </li>
+            `;
+            } else {
+                paginationHTML += `
+              <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${i}, '${currentPrefix}', '${currentSearch}')">${i}</a>
+              </li>
+            `;
+            }
+        }
+        
+        // Last page
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                 paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+            paginationHTML += `
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${totalPages}, '${currentPrefix}', '${currentSearch}')">${totalPages}</a>
+            </li>`;
+        }
+
+        // Next button
+        if (hasNextPage) {
+            paginationHTML += `
+            <li class="page-item">
+              <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}')">
+                Next <i class="fas fa-chevron-right"></i>
+              </a>
+            </li>
+          `;
+        } else {
+            paginationHTML += `
+            <li class="page-item disabled">
+              <span class="page-link">
+                Next <i class="fas fa-chevron-right"></i>
+              </span>
+            </li>
+          `;
+        }
     }
 
     document.getElementById('paginationList').innerHTML = paginationHTML;
@@ -731,7 +830,7 @@ function createId() { return Date.now().toString(36) + '-' + Math.random().toStr
 
 function addFilesToQueue(fileList) {
     for (const f of Array.from(fileList)) {
-        uploadQueue.push({ id: createId(), file: f, status: 'queued', progress: 0 });
+        uploadQueue.push({ id: createId(), file: f, status: 'queued', progress: 0, uploadedBytes: 0, uploadRate: 0 });
     }
     renderUploadQueue();
 }
@@ -747,7 +846,27 @@ function renderUploadQueue() {
         return;
     }
 
-    container.innerHTML = uploadQueue.map(item => `
+    // Local size formatter so it's always in scope regardless of IIFE load order
+    function fmtSize(bytes) {
+        if (!bytes || bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+        return (bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
+    }
+
+    container.innerHTML = uploadQueue.map(item => {
+        let statusText;
+        if (item.status === 'uploading') {
+            const pct = Math.round(item.progress || 0);
+            statusText = fmtSize(item.uploadedBytes || 0) + ' / ' + fmtSize(item.file.size) + ' (' + pct + '%)';
+            if (item.uploadRate > 0) statusText += ' \u00b7 ' + fmtSize(item.uploadRate) + '/s';
+        } else {
+            statusText = item.status;
+        }
+        const actionBtn = item.status === 'uploading'
+            ? `<button class="btn btn-sm btn-outline-secondary cancel-upload" data-id="${item.id}"><i class="fas fa-ban"></i></button>`
+            : `<button class="btn btn-sm btn-danger remove-queued" data-id="${item.id}"><i class="fas fa-trash"></i></button>`;
+        return `
       <div class="upload-item" data-id="${item.id}">
         <div class="meta">
           <div style="display:flex; align-items:center; gap:0.75rem; min-width:0; width:100%; margin-bottom:5px;">
@@ -761,14 +880,12 @@ function renderUploadQueue() {
             <div class="progress-bar" style="width: ${Math.round(item.progress)}%; height: 8px;"></div>
           </div>
           <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem;">
-            <small class="text-muted status">${item.status}</small>
-            <div class="controls">
-              ${item.status === 'uploading' ? `<button class="btn btn-sm btn-outline-secondary cancel-upload" data-id="${item.id}"><i class="fas fa-ban"></i></button>` : `<button class="btn btn-sm btn-danger remove-queued" data-id="${item.id}"><i class="fas fa-trash"></i></button>`}
-            </div>
+            <small class="text-muted status">${statusText}</small>
+            <div class="controls">${actionBtn}</div>
           </div>
         </div>
-      </div>
-    `).join('');
+      </div>`;
+    }).join('');
 
     // Wire up controls
     document.querySelectorAll('.remove-queued').forEach(btn => btn.addEventListener('click', function (e) {
@@ -778,15 +895,27 @@ function renderUploadQueue() {
         renderUploadQueue();
     }));
 
-    document.querySelectorAll('.cancel-upload').forEach(btn => btn.addEventListener('click', function (e) {
+    document.querySelectorAll('.cancel-upload').forEach(btn => btn.addEventListener('click', async function (e) {
         const id = this.dataset.id;
         const handle = xhrMap.get(id);
-        if (handle && handle.abort) {
-            handle.abort();
-        } else if (handle && handle.xhr) {
-            handle.xhr.abort();
-        }
         const entry = uploadQueue.find(i => i.id === id);
+
+        // Abort in-flight fetch
+        if (handle && handle.controller) handle.controller.abort();
+        // Abort legacy XHR (small file path)
+        if (handle && handle.xhr) handle.xhr.abort();
+
+        // Tell S3 to discard the incomplete multipart upload
+        if (entry && entry.s3UploadId && entry.s3Key) {
+            try {
+                await fetch('/mbkbucket/upload-abort', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
+                });
+            } catch (_) { /* best-effort */ }
+        }
+
         if (entry) { entry.status = 'cancelled'; entry.progress = 0; }
         xhrMap.delete(id);
         renderUploadQueue();
@@ -821,41 +950,90 @@ async function startUploadEntry(entry) {
     const file = entry.file;
     try {
         if (file.size > CHUNK_SIZE) {
-            // chunked upload
-            const uploadId = createId();
-            entry.uploadId = uploadId;
+            // ---------------------------------------------------------------
+            // S3 Multipart Upload
+            // Step 1 — Initiate: get uploadId + key from the server
+            // ---------------------------------------------------------------
+            const initResp = await fetch('/mbkbucket/upload-init', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    fileName: file.name,
+                    prefix: currentPrefix,
+                    contentType: file.type || 'application/octet-stream'
+                })
+            });
+            const initJson = await initResp.json();
+            if (!initResp.ok || !initJson.success) throw new Error(initJson.error || 'Failed to initiate upload');
+
+            const { uploadId, key } = initJson;
+            entry.s3UploadId = uploadId;  // stored so cancel handler can abort
+            entry.s3Key = key;
+
+            // ---------------------------------------------------------------
+            // Step 2 — Upload parts (1-based partNumber, min 5 MB except last)
+            // ---------------------------------------------------------------
             const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+            const parts = []; // [{ partNumber, ETag }]
             let uploadedBytes = 0;
+
             for (let i = 0; i < totalChunks; i++) {
-                if (entry.status === 'cancelled') throw new Error('Upload cancelled');
+                const _chunkStart = Date.now();
+                if (entry.status === 'cancelled') {
+                    // Clean up on S3
+                    await fetch('/mbkbucket/upload-abort', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ uploadId, key })
+                    }).catch(() => {});
+                    throw new Error('Upload cancelled');
+                }
+
                 const start = i * CHUNK_SIZE;
-                const end = Math.min(file.size, start + CHUNK_SIZE);
-                const blob = file.slice(start, end);
+                const blob = file.slice(start, Math.min(file.size, start + CHUNK_SIZE));
+                const partNumber = i + 1; // S3 parts are 1-based
 
                 const fd = new FormData();
                 fd.append('chunk', blob, file.name);
                 fd.append('uploadId', uploadId);
-                fd.append('fileName', file.name);
-                fd.append('chunkIndex', String(i));
-                fd.append('totalChunks', String(totalChunks));
+                fd.append('key', key);
+                fd.append('partNumber', String(partNumber));
 
                 const controller = new AbortController();
-                xhrMap.set(entry.id, { controller });
+                xhrMap.set(entry.id, { controller, s3UploadId: uploadId, s3Key: key });
 
-                const resp = await fetch('/mbkbucket/upload-chunk', { method: 'POST', body: fd, signal: controller.signal });
-                if (!resp.ok) throw new Error('Chunk upload failed');
+                const chunkResp = await fetch('/mbkbucket/upload-chunk', {
+                    method: 'POST',
+                    body: fd,
+                    signal: controller.signal
+                });
+                const chunkJson = await chunkResp.json();
+                if (!chunkResp.ok || !chunkJson.success) throw new Error(chunkJson.error || `Part ${partNumber} upload failed`);
+
+                parts.push({ partNumber: chunkJson.partNumber, ETag: chunkJson.ETag });
                 uploadedBytes += blob.size;
-                entry.progress = (uploadedBytes / file.size) * 95; // up to 95% until assembly
+                const _chunkDuration = (Date.now() - _chunkStart) / 1000;
+                entry.uploadRate = _chunkDuration > 0 ? blob.size / _chunkDuration : 0;
+                entry.uploadedBytes = uploadedBytes;
+                entry.progress = (uploadedBytes / file.size) * 95; // reserve last 5% for complete call
                 renderUploadQueue();
             }
 
-            // complete
-            const completeResp = await fetch('/mbkbucket/upload-complete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ uploadId: entry.uploadId, fileName: file.name, prefix: currentPrefix, contentType: file.type || 'application/octet-stream' }) });
+            // ---------------------------------------------------------------
+            // Step 3 — Complete: assemble all parts on S3
+            // ---------------------------------------------------------------
+            const completeResp = await fetch('/mbkbucket/upload-complete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ uploadId, key, parts })
+            });
             const completeJson = await completeResp.json();
-            if (!completeResp.ok || !completeJson.success) throw new Error(completeJson.error || 'Assemble failed');
+            if (!completeResp.ok || !completeJson.success) throw new Error(completeJson.error || 'Failed to complete upload');
 
-            entry.status = 'done'; entry.progress = 100; xhrMap.delete(entry.id); renderUploadQueue();
-            showAlert('File uploaded successfully', 'success');
+            entry.status = 'done'; entry.progress = 100;
+            xhrMap.delete(entry.id);
+            renderUploadQueue();
+            showAlert(`${file.name} uploaded successfully`, 'success');
             loadFiles(currentPage, currentPrefix);
         } else {
             // small file XHR
@@ -868,9 +1046,20 @@ async function startUploadEntry(entry) {
 
             xhr.upload.addEventListener('progress', (e) => {
                 if (!e.lengthComputable) return;
+                const _now = Date.now();
+                const _dt = (_now - (entry._rateLastTime || _now)) / 1000;
+                const _db = e.loaded - (entry._rateLastBytes || 0);
+                if (_dt > 0.2) {
+                    entry.uploadRate = _db / _dt;
+                    entry._rateLastTime = _now;
+                    entry._rateLastBytes = e.loaded;
+                }
+                entry.uploadedBytes = e.loaded;
                 entry.progress = (e.loaded / e.total) * 100;
                 renderUploadQueue();
             });
+            entry._rateLastTime = Date.now();
+            entry._rateLastBytes = 0;
 
             xhr.addEventListener('load', () => {
                 try {
@@ -898,7 +1087,16 @@ async function startUploadEntry(entry) {
         }
     } catch (err) {
         console.error('Upload failed for', entry.file.name, err);
+        // If a multipart upload was initiated but didn't finish (not a user cancel), abort it on S3
+        if (entry.s3UploadId && entry.s3Key && entry.status !== 'cancelled') {
+            fetch('/mbkbucket/upload-abort', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
+            }).catch(() => {});
+        }
         entry.status = entry.status === 'cancelled' ? 'cancelled' : 'error';
+        xhrMap.delete(entry.id);
         renderUploadQueue();
         showAlert('Upload failed: ' + (err.message || 'unknown'), 'error');
     }
@@ -915,8 +1113,33 @@ document.getElementById('clearQueueBtn')?.addEventListener('click', function ()
 
 
 
+// Initialize upload section collapse functionality
+function initializeUploadCollapse() {
+    const toggleBtn = document.getElementById('uploadToggleBtn');
+    const uploadSection = document.getElementById('uploadSection');
+    
+    if (!toggleBtn || !uploadSection) return;
+    
+    toggleBtn.addEventListener('click', function() {
+        const isExpanded = uploadSection.classList.contains('expanded');
+        
+        if (isExpanded) {
+            // Collapse
+            uploadSection.classList.remove('expanded');
+            toggleBtn.classList.remove('expanded');
+        } else {
+            // Expand
+            uploadSection.classList.add('expanded');
+            toggleBtn.classList.add('expanded');
+        }
+    });
+}
+
 // Add hover effects and animations
 document.addEventListener('DOMContentLoaded', function () {
+    // Initialize collapsible upload section
+    initializeUploadCollapse();
+    
     // Load initial files (support both legacy 'prefix' and new 'folder' query param)
     const urlParams = new URLSearchParams(window.location.search);
     const initialPrefix = urlParams.get('folder') || urlParams.get('prefix') || bucketAppName || '';

package/views/bucket.handlebars

@@ -72,7 +72,7 @@
         }
 
         .logo img {
-            width: 40px
+            width: 35px
         }
 
         .main-content {