Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better preview visuals

Browse Source
This commit is contained in:
Kobe
2025-06-01 12:43:24 +02:00
parent ea118a37c5
commit 3a768146c1
2 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/js/components/filePreview.js
View File

@@ -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>

22
static/js/file-grid.js
View File

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