diff --git a/static/js/components/filePreview.js b/static/js/components/filePreview.js index f3e7f4e..823f7c5 100644 --- a/static/js/components/filePreview.js +++ b/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 = ` ${file.name} @@ -86,9 +86,9 @@ export class FilePreview { } else if (['pdf'].includes(extension)) { // PDF preview contentDiv.innerHTML = ` - + `; - } else if (['mp4', 'webm'].includes(extension)) { + } else if (['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(extension)) { // Video preview contentDiv.innerHTML = ` `; - } else if (['mp3', 'wav'].includes(extension)) { + } else if (['mp3', 'wav', 'ogg', 'm4a', 'flac'].includes(extension)) { // Audio preview contentDiv.innerHTML = ` `; + } 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 = ` +
${text}
+ `; + } 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 = ` + + `; } else { // Default preview for other file types contentDiv.innerHTML = ` @@ -123,7 +137,7 @@ export class FilePreview {
Error Loading Preview
-

Unable to load file preview. Please try downloading the file instead.

+

File could not be viewed. Please try downloading the file instead.

Download diff --git a/static/js/file-grid.js b/static/js/file-grid.js index 6854e25..979de43 100644 --- a/static/js/file-grid.js +++ b/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(`