Ensure attachments open in a new tab

[Alexander Bautz]

The default behavior in a SharePoint EditForm is to open the attachments (when clicked) in the SAME window as the edit form – effectively cancelling out all the changes you may have made in the current session.

Adding this snippet to your Custom JS ensures all attachments are opened in a new tab – and also previews any attached images.

(function() {
    var delImgTicker = {};
    jQuery("#idAttachmentsTable tr").each(function (i, tr) {
        var trID = tr.id.replace(/\{|\}/g, "");
        if (jQuery("#img_" + trID).length === 0) {
            jQuery(tr).find("td:first").css({ "width": "50px", "white-space": "nowrap", "padding-right": "5px" });
            jQuery(tr).find("td:first a").each(function (i, a) {
                var h = jQuery(this).attr("href").toLowerCase(), e = h.substring(h.lastIndexOf("."));
                if (h.indexOf("http") !== 0) {
                    // Don't remove the delete link
                    return;
                }
                // Ensure the link opens in a new tab
                jQuery(a).attr("target", "_blank");
                // Remove the default onclick
                jQuery(a).removeAttr("onclick");
                if (e === ".png" || e === ".gif" || e === ".jpg" || e === ".jpeg") {
                    // Capture deletion of the attachement
                    delImgTicker[tr.id] = setInterval(function () {
                        if (document.getElementById(tr.id) === null) {
                            jQuery("#img_" + trID).remove();
                            clearInterval(delImgTicker[tr.id]);
                        }
                    }, 2000);
                    // Add preview of images
                    jQuery(a).parents("tr:first").after("<tr><td colspan='2'><img id='img_" + trID + "' src='" + makeAbsUrl(h) + "' style='max-width:500px;'/></td></tr>");
                }
            });
        }
    });
})();

Please ask any questions in the comments below.

Alexander

[Author]

Posts