Forum Discussion
NMTeam
3 months agoCommunity Member
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. N...
SamHill
2 months agoSuper Hero
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');
});
};