agnos.is Forums

We have written the following JavaScript code to allow students to preview PDF files uploaded to our forum. Our goal is to enable them to view lecture notes directly on the forum while preventing them from downloading the files.

However, since the PDFs are embedded within an iframe, we haven't been able to completely block the "Save As" option. Even though previewing works fine, students can still download the PDF files, especially on mobile devices where the "Save to Files" option appears.

We need a solution that ensures PDFs can be previewed but not downloaded on both desktop and mobile devices. How can we achieve this?

$(document).ready(function () {
    function processPDFs() {
        console.log("PDF önizleme işleniyor...");

        $('a[href$=".pdf"]').each(function () {
            let link = $(this).attr('href');

            if (!$(this).next('.pdf-container').length) {
                if (isMobileDevice()) {
                    // 📱 **Mobil cihazlarda sadece PDF linkini göster, önizleme yok**
                    $(this).show();
                } else {
                    // 💻 **Masaüstünde PDF'yi önizle**
                    $(this).hide(); // PDF linkini gizle

                    let container = $('<div class="pdf-container" style="width:100%;max-width:900px;height:700px;position:relative;margin-top:10px;border:1px solid #ccc;overflow:hidden"></div>');
                    let pdfObject = $('');
                    let fullscreenBtn = $('<button class="fullscreen-toggle" style="position:absolute;top:10px;right:10px;background:#000;color:#fff;border:none;padding:5px 10px;cursor:pointer;z-index:10">🔍 Tam Ekran</button>');

                    pdfObject.attr('data', link + "#toolbar=0");

                    fullscreenBtn.on('click', function () {
                        toggleFullscreen(container[0]);
                    });

                    container.append(pdfObject).append(fullscreenBtn);
                    $(this).after(container);
                }
            }
        });

        $('.file a').each(function () {
            let fileLink = $(this).attr('href');
            if (fileLink.endsWith('.pdf') &amp;&amp; !$(this).next('.pdf-container').length) {
                if (isMobileDevice()) {
                    // 📱 **Mobilde sadece PDF linki göster**
                    $(this).show();
                } else {
                    // 💻 **Masaüstünde PDF'yi önizle**
                    $(this).hide();

                    let container = $('<div class="pdf-container" style="width:100%;max-width:900px;height:700px;position:relative;margin-top:10px;border:1px solid #ccc;overflow:hidden"></div>');
                    let pdfObject = $('');
                    let fullscreenBtn = $('<button class="fullscreen-toggle" style="position:absolute;top:10px;right:10px;background:#000;color:#fff;border:none;padding:5px 10px;cursor:pointer;z-index:10">🔍 Tam Ekran</button>');

                    pdfObject.attr('data', fileLink + "#toolbar=0");

                    fullscreenBtn.on('click', function () {
                        toggleFullscreen(container[0]);
                    });

                    container.append(pdfObject).append(fullscreenBtn);
                    $(this).after(container);
                }
            }
        });
    }

    // 📌 **Mobil Cihaz Algılama**
    function isMobileDevice() {
        return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    }

    // 📌 Tam Ekran Aç/Kapat Fonksiyonu
    function toggleFullscreen(element) {
        if (!document.fullscreenElement &amp;&amp; !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement &amp;&amp; !document.msFullscreenElement) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    }

    // 📌 ESC ile Tam Ekrandan Çıkınca Butonu Güncelle
    $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange", function () {
        $(".fullscreen-toggle").text(document.fullscreenElement ? "↩ Tam Ekrandan Çık" : "🔍 Tam Ekran");
    });

    // İlk yükleme
    processPDFs();

    // Sayfa değişimlerinde tekrar çalıştır (NodeBB SPA yapısına uygun)
    $(window).on('action:ajaxify.end', function () {
        processPDFs();
    });

    console.log("PDF izleme sistemi güncellendi: Mobilde sadece link gösteriliyor, masaüstünde önizleme aktif.");
});

Yes, I have updated it, and my NodeBB version is also up to date. However, when I click upload, it works fine on your site, but it doesn't work on mine. I tried disabling CSS and JS, then removing plugins, but it still didn't work. What do you think could be the issue?

Im trying to add an upload button as in the chats upload button Yes, I wrote some code, and the button appears there. When I click it, it doesn't upload directly. How can I make it work? How can I add there upload button ?