This file type cannot be previewed.
Click "Download" to get the file.
`;
container.appendChild(message);
}
// Show modal
modal.classList.add('active');
}
// Check if a MIME type is text-viewable — delegates to window.isTextViewable
isTextViewable(mimeType) {
return window.isTextViewable ? window.isTextViewable(mimeType) : false;
}
// Creates a text viewer using authenticated fetch
async createTextViewer(file, container, loader) {
try {
console.log('Creating text viewer for:', file.name);
const token = localStorage.getItem('oxicloud_token');
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
const response = await fetch(`/api/files/${file.id}?inline=true`, { headers });
if (!response.ok) {
throw new Error(`Error fetching file: ${response.status} ${response.statusText}`);
}
const text = await response.text();
// Remove loader
if (loader && loader.parentNode) {
loader.parentNode.removeChild(loader);
}
// Create text viewer element
const pre = document.createElement('pre');
pre.className = 'inline-viewer-text-content';
pre.textContent = text;
container.appendChild(pre);
console.log('Text viewer created successfully');
} catch (error) {
console.error('Error creating text viewer:', error);
// Remove loader
if (loader && loader.parentNode) {
loader.parentNode.removeChild(loader);
}
this.showErrorMessage(container);
}
}
// Creates a viewer using a Blob URL to avoid content-disposition header
async createBlobUrlViewer(file, type, container, loader) {
try {
console.log('Creating blob URL viewer for:', file.name, 'type:', type);
// Use XMLHttpRequest instead of fetch to get better control over the response
const xhr = new XMLHttpRequest();
xhr.open('GET', `/api/files/${file.id}?inline=true`, true);
xhr.responseType = 'blob';
// Add auth header
const token = localStorage.getItem('oxicloud_token');
if (token) {
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
}
// Create a promise to handle the XHR
const response = await new Promise((resolve, reject) => {
xhr.onload = function() {
if (this.status >= 200 && this.status < 300) {
resolve(this.response);
} else {
reject(new Error(`Error fetching file: ${this.status} ${this.statusText}`));
}
};
xhr.onerror = function() {
reject(new Error('Network error'));
};
xhr.send();
});
// Create blob URL from response
const blob = response;
const blobUrl = URL.createObjectURL(blob);
console.log('Created blob URL:', blobUrl.substring(0, 30) + '...');
// Remove loader
if (loader && loader.parentNode) {
loader.parentNode.removeChild(loader);
}
if (type === 'image') {
console.log('Creating image viewer');
// Create image element
const img = document.createElement('img');
img.className = 'inline-viewer-image';
img.src = blobUrl;
img.alt = file.name;
container.appendChild(img);
// Add loading indicator until image loads
img.style.opacity = 0;
img.onload = () => {
console.log('Image loaded successfully');
img.style.opacity = 1;
};
img.onerror = () => {
console.error('Failed to load image');
container.removeChild(img);
this.showErrorMessage(container);
};
}
else if (type === 'pdf') {
console.log('Creating PDF viewer');
// Create iframe for PDF (more reliable than object tag)
const iframe = document.createElement('iframe');
iframe.className = 'inline-viewer-pdf';
iframe.src = blobUrl;
iframe.setAttribute('allowfullscreen', 'true');
container.appendChild(iframe);
// Monitor iframe for loading issues
setTimeout(() => {
if (!iframe.contentDocument ||
iframe.contentDocument.body.innerHTML === '') {
console.warn('PDF viewer might be having issues, adding fallback');
// Add fallback embed
const embed = document.createElement('embed');
embed.className = 'inline-viewer-pdf-fallback';
embed.type = 'application/pdf';
embed.src = blobUrl;
container.appendChild(embed);
}
}, 2000);
}
// Store blob URL for cleaning up later
this.currentBlobUrl = blobUrl;
}
catch (error) {
console.error('Error creating blob URL viewer:', error);
// Remove loader
if (loader && loader.parentNode) {
loader.parentNode.removeChild(loader);
}
this.showErrorMessage(container);
}
}
// Helper to show error message
showErrorMessage(container) {
// Show error message
const message = document.createElement('div');
message.className = 'inline-viewer-message';
message.innerHTML = `
Error loading the file.
Try downloading it directly.
`;
container.appendChild(message);
}
closeViewer() {
// Get modal
const modal = document.getElementById('inline-viewer-modal');
// Hide modal
modal.classList.remove('active');
// Clean up blob URL if exists
if (this.currentBlobUrl) {
URL.revokeObjectURL(this.currentBlobUrl);
this.currentBlobUrl = null;
}
// Clear references
this.currentFile = null;
}
downloadFile(file) {
const token = localStorage.getItem('oxicloud_token');
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
fetch(`/api/files/${file.id}`, { headers })
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.blob();
})
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = file.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
})
.catch(err => console.error('Download error:', err));
}
zoomImage(factor) {
const container = document.querySelector('.inline-viewer-container');
const img = container.querySelector('.inline-viewer-image');
if (!img) return;
// Get current scale
let scale = img.dataset.scale ? parseFloat(img.dataset.scale) : 1.0;
// Apply zoom factor
scale *= factor;
// Limit scale
scale = Math.max(0.1, Math.min(5.0, scale));
// Save scale
img.dataset.scale = scale;
// Apply scale
img.style.transform = `scale(${scale})`;
}
resetZoom() {
const container = document.querySelector('.inline-viewer-container');
const img = container.querySelector('.inline-viewer-image');
if (!img) return;
// Reset scale
img.dataset.scale = 1.0;
img.style.transform = 'scale(1.0)';
}
}
// Initialize viewer when document is ready
document.addEventListener('DOMContentLoaded', () => {
// Check if it's already initialized
if (!window.inlineViewer) {
console.log('Initializing inline viewer on DOMContentLoaded');
window.inlineViewer = new InlineViewer();
}
});
// Fallback initialization for cases where DOMContentLoaded already fired
if (document.readyState === 'complete' || document.readyState === 'interactive') {
if (!window.inlineViewer) {
console.log('Fallback initialization for inline viewer');
setTimeout(() => {
window.inlineViewer = new InlineViewer();
}, 100);
}
}