diff --git a/templates/lesson_view.html b/templates/lesson_view.html index 29c10aa..a728e46 100644 --- a/templates/lesson_view.html +++ b/templates/lesson_view.html @@ -176,9 +176,11 @@ console.log('Encoded file path:', filePath); // Check if this is an HTML file - const isHtmlFile = filePath.toLowerCase().endsWith('.html'); + const isHtmlFile = filePath.toLowerCase().endsWith('.html') || filePath.toLowerCase().endsWith('.htm'); + const isPdfFile = filePath.toLowerCase().endsWith('.pdf'); + const isBinaryDoc = ['.docx', '.doc', '.rtf'].some(ext => filePath.toLowerCase().endsWith(ext)); const contentDiv = document.getElementById('content-{{ loop.index0 }}'); - + if (isHtmlFile) { // For HTML files, create an iframe console.log('Creating iframe for HTML file'); @@ -189,6 +191,25 @@ title="${filePath.split('/').pop()}" > `; + } else if (isPdfFile) { + // For PDFs, embed via iframe rather than fetching as text - + // browsers render PDFs natively in an iframe, but fetching + // the raw bytes as text (like below) produces garbage. + console.log('Embedding PDF in iframe'); + contentDiv.innerHTML = ` + + `; + } else if (isBinaryDoc) { + // .docx/.doc/.rtf can't be rendered inline by the browser; + // fetching them as text would show garbled binary content, + // so just point at the download/open link instead. + contentDiv.innerHTML = + '
Preview isn\'t available for this file type. ' + + 'Use the "Open in new tab" link below to view or download it.
'; } else { // For text files, fetch and display content fetch('/files/' + encodeURIComponent(filePath))