Fix PDF preview in DocumentVault

js/main.js

@@ -11,6 +11,7 @@ class App {
     this.pendingDelete = null;
     this.pendingRename = null;
     this.cachedFolders = [];
+    this.currentPreviewObjectUrl = null;
     this.init();
   }
 
@@ -167,7 +168,12 @@ class App {
     // Modals Close via X button
     document.querySelectorAll('.close-modal').forEach(btn => {
       btn.onclick = () => {
-        btn.closest('.modal-overlay').classList.remove('active');
+        const modal = btn.closest('.modal-overlay');
+        if (modal && modal.id === 'previewModal') {
+          this.closePreviewModal();
+          return;
+        }
+        modal.classList.remove('active');
       };
     });
 
@@ -175,7 +181,11 @@ class App {
     document.querySelectorAll('.modal-overlay').forEach(overlay => {
       overlay.addEventListener('click', (e) => {
         if (e.target === overlay) {
-          overlay.classList.remove('active');
+          if (overlay.id === 'previewModal') {
+            this.closePreviewModal();
+          } else {
+            overlay.classList.remove('active');
+          }
           sidebar.classList.remove('mobile-open');
         }
       });
@@ -500,6 +510,13 @@ class App {
     body.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>Loading preview...</p></div>';
     modal.classList.add('active');
 
+    const clearPreviewObjectUrl = () => {
+      if (this.currentPreviewObjectUrl) {
+        URL.revokeObjectURL(this.currentPreviewObjectUrl);
+        this.currentPreviewObjectUrl = null;
+      }
+    };
+
     if (downloadBtn) {
       downloadBtn.onclick = () => this.downloadFile(`${url}?download=true`, file.name);
     }
@@ -509,6 +526,7 @@ class App {
     }
 
     if (isImage(file.name)) {
+      clearPreviewObjectUrl();
       const img = new Image();
       img.src = url;
       img.className = 'preview-image';
@@ -523,11 +541,30 @@ class App {
     }
 
     if (isPDF(file.name)) {
-      body.innerHTML = `<iframe src="${url}" class="preview-iframe" title="${file.name}"></iframe>`;
+      try {
+        clearPreviewObjectUrl();
+        const response = await fetch(`${url}?download=true`, {
+          headers: { 'X-User-ID': 'default_user' }
+        });
+        if (!response.ok) {
+          throw new Error(`PDF preview failed: ${response.status}`);
+        }
+
+        const pdfBlob = await response.blob();
+        this.currentPreviewObjectUrl = URL.createObjectURL(pdfBlob);
+        body.innerHTML = `<iframe src="${this.currentPreviewObjectUrl}" class="preview-iframe" title="${file.name}"></iframe>`;
+      } catch (err) {
+        body.innerHTML = this.previewFallback(
+          file.name,
+          `${url}?download=true`,
+          err.message || 'PDF preview is unavailable.'
+        );
+      }
       return;
     }
 
     if (isText(file.name)) {
+      clearPreviewObjectUrl();
       try {
         const response = await fetch(url, { headers: { 'X-User-ID': 'default_user' } });
         if (!response.ok) {
@@ -546,6 +583,7 @@ class App {
       return;
     }
 
+    clearPreviewObjectUrl();
     body.innerHTML = this.previewFallback(
       file.name,
       `${url}?download=true`,
@@ -575,6 +613,15 @@ class App {
     link.remove();
   }
 
+  closePreviewModal() {
+    if (this.currentPreviewObjectUrl) {
+      URL.revokeObjectURL(this.currentPreviewObjectUrl);
+      this.currentPreviewObjectUrl = null;
+    }
+    const modal = document.getElementById('previewModal');
+    if (modal) modal.classList.remove('active');
+  }
+
   async openHistory(path, name) {
     this.ui.showHistoryModal(name);
     try {