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 = `
@@ -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 {
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(`