better preview visuals

static/js/components/filePreview.js

@@ -78,7 +78,7 @@ export class FilePreview {
 
         try {
             // Handle different file types
-            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
+            if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'tiff'].includes(extension)) {
                 // Image preview
                 contentDiv.innerHTML = `
                     <img src="${file.url}" class="img-fluid" alt="${file.name}" style="max-height: 70vh;">
@@ -86,9 +86,9 @@ export class FilePreview {
             } else if (['pdf'].includes(extension)) {
                 // PDF preview
                 contentDiv.innerHTML = `
-                    <iframe src="${file.url}" width="100%" height="70vh" frameborder="0"></iframe>
+                    <iframe src="${file.url}" width="100%" style="min-height: 600px;" frameborder="0"></iframe>
                 `;
-            } else if (['mp4', 'webm'].includes(extension)) {
+            } else if (['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(extension)) {
                 // Video preview
                 contentDiv.innerHTML = `
                     <video controls class="w-100" style="max-height: 70vh;">
@@ -96,7 +96,7 @@ export class FilePreview {
                         Your browser does not support the video tag.
                     </video>
                 `;
-            } else if (['mp3', 'wav'].includes(extension)) {
+            } else if (['mp3', 'wav', 'ogg', 'm4a', 'flac'].includes(extension)) {
                 // Audio preview
                 contentDiv.innerHTML = `
                     <audio controls class="w-100">
@@ -104,6 +104,20 @@ export class FilePreview {
                         Your browser does not support the audio tag.
                     </audio>
                 `;
+            } else if (['txt', 'md', 'csv', 'py', 'js', 'html', 'css', 'json', 'xml', 'sql', 'sh', 'bat'].includes(extension)) {
+                // Text/Code preview
+                const response = await fetch(file.url);
+                const text = await response.text();
+                contentDiv.innerHTML = `
+                    <pre class="bg-light p-3 rounded" style="max-height: 70vh; overflow-y: auto;">${text}</pre>
+                `;
+            } else if (['docx', 'doc', 'xlsx', 'xls', 'pptx', 'ppt', 'odt', 'odp', 'ods'].includes(extension)) {
+                // Office document preview using Office Web Viewer
+                const encodedUrl = encodeURIComponent(file.url);
+                contentDiv.innerHTML = `
+                    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=${encodedUrl}" 
+                            width="100%" height="70vh" frameborder="0"></iframe>
+                `;
             } else {
                 // Default preview for other file types
                 contentDiv.innerHTML = `
@@ -123,7 +137,7 @@ export class FilePreview {
                 <div class="text-center py-5">
                     <i class="fas fa-exclamation-circle fa-4x mb-3 text-danger"></i>
                     <h5 class="mb-3">Error Loading Preview</h5>
-                    <p class="text-muted">Unable to load file preview. Please try downloading the file instead.</p>
+                    <p class="text-muted">File could not be viewed. Please try downloading the file instead.</p>
                     <a href="${file.url}" class="btn btn-primary" download>
                         <i class="fas fa-download me-2"></i>Download
                     </a>

static/js/file-grid.js

@@ -234,7 +234,16 @@ function renderFiles(files) {
             // Add preview button for supported file types
             if (file.type !== 'folder') {
                 const extension = file.name.split('.').pop().toLowerCase();
-                const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
+                const supportedTypes = [
+                    // Images
+                    'jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'tiff',
+                    // Documents
+                    'pdf', 'txt', 'md', 'csv', 'py', 'js', 'html', 'css', 'json', 'xml', 'sql', 'sh', 'bat',
+                    'docx', 'doc', 'xlsx', 'xls', 'pptx', 'ppt', 'odt', 'odp', 'ods',
+                    // Media
+                    'mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv',
+                    'mp3', 'wav', 'ogg', 'm4a', 'flac'
+                ];
                 
                 if (supportedTypes.includes(extension)) {
                     actionsArr.push(`
@@ -282,7 +291,16 @@ function renderFiles(files) {
             // Add preview button for supported file types
             if (file.type !== 'folder') {
                 const extension = file.name.split('.').pop().toLowerCase();
-                const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
+                const supportedTypes = [
+                    // Images
+                    'jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'tiff',
+                    // Documents
+                    'pdf', 'txt', 'md', 'csv', 'py', 'js', 'html', 'css', 'json', 'xml', 'sql', 'sh', 'bat',
+                    'docx', 'doc', 'xlsx', 'xls', 'pptx', 'ppt', 'odt', 'odp', 'ods',
+                    // Media
+                    'mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv',
+                    'mp3', 'wav', 'ogg', 'm4a', 'flac'
+                ];
                 
                 if (supportedTypes.includes(extension)) {
                     actionsArr.push(`