Forum Discussion

NMTeam's avatar
NMTeam
Community Member
2 months ago

Uploaded PDFs no longer open in a new tab

Hello - uploaded PDF documents are now downloaded rather than opened in a new tab. I saw a discussion about this a couple years ago (and it was noted resolved), but it appears to be an issue again. Note that when you preview this feature in Rise, it opens in a new tab, but in Review360 it's downloaded. It also downloads for Rise courses published live. Can you please fix?

  • Hi NMTeam this appears to be by design, as the link uses the download attribute, which tells the browser to download the document and so it will not be viewed as a design/functional fault by articulate. I think the design of the component with the arrow icon pointing down, also indicates that the button is download, rather than open in a new window.

    In order to get around this, you would need to include a piece of JavaScript in your project that removes the download attribute from these components.

    // Select the target container element
    const lessonBlocks = document.querySelector('section.blocks-lesson');
    // Options for the observer (which types of mutations to observe)
    const config = {
        childList: true,    // Listen for changes to child elements
        attributes: true,   // Listen for changes to attributes
        subtree: true,      // Monitor all descendant nodes of the target
        characterData: true // Monitor changes to text content
    };
    // Callback function to execute when mutations are observed
    const callback = (mutationsList, observer) => {
        const dl = document.querySelectorAll('a[download].block-attachment');
        dl.forEach(function (el, ix) {
            el.removeAttribute('download');
        });
    };
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
    // Start observing the target node with the configured options
    observer.observe(lessonBlocks, config);
    // run first time
    callback();

    If you need to differentiate between different file type and treat them differently, you need to add some logic to look at the file extension. Here's a quick crude example:

    // Callback function to execute when mutations are observed
    const callback = (mutationsList, observer) => {
        const dl = document.querySelectorAll('a[download].block-attachment');
        dl.forEach(function (el, ix) {
            // only remove download for PDF
            if(el.getAttribute('download').indexOf('.pdf') !== -1) el.removeAttribute('download');
        });
    };