Javascript: Display Image Fetched Through Authenticated REST API

I have a protected REST endpoint in Oracle Content and Experience Cloud, which returns image/png. Let's display it.

var imgUrl = "https://foo.barcloud.com/documents/api/latest/files/FA5A98CDC6482BD3ED6CFEA98CD980E/data/thumbnail";
var user = "foobar";
var pass = "Yolo6969";

// @see https://stackoverflow.com/a/17682424/357403

var xhr = new XMLHttpRequest();

// Success
xhr.addEventListener("load", function __xhrLoaded() {
    var img = document.getElementById('thumbnail');
    // This will create the DataURI for us.
    var URL = window.URL || window.webkitURL;

    switch (this.responseType) {
    case "arraybuffer":
        // createObjectURL only accepts Blob.
        img.src = URL.createObjectURL(new Blob([ this.response ], { type : this.getResponseHeader('Content-Type') }));
        break;
    case "blob":
        img.src = URL.createObjectURL(this.response);
        break;
    default:
        console.error("Unsupported response type: ", this.responseType, " -- expected binary types for image data.");
        break;
    }
});

// Failure
xhr.addEventListener("error", function __xhrFailed() {
    console.log("Request failed.", this);
});

// open (method, uri, isAsync, user, passwd)
xhr.open('GET', imgUrl, true, user, pass);
// Yes, I want to authenticate.
xhr.withCredentials = true;
// I want to authenticate right now.
xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ':' + pass));
// Give me a Blob in the `response` field.
xhr.responseType = "blob";
xhr.overrideMimeType("image/png");
// Execute the action.
xhr.send();

javascript: is Element really really visible?

/**
 * Is the element visible by the Eye?
 * @param {Element | jQuery} el - object to check. Either an Element or a jQuery selection.
 * @returns {object} True if it can be seen.
 */
function isElementVisible(el) {
    "use strict";
    if (!el) // Can't find? Can't see!
        return false;
    var v_element = (el instanceof jQuery) ? el : $(el);
    if (v_element.length === 0) // Still nothing to look for
        return false;
    return v_element[0].isSameNode(document.elementFromPoint((v_element.width() / 2) + v_element.offset().left, (v_element.height() / 2) + v_element.offset().top));
}

What happens here?

We are checking if the element at the given point (our element's middle) is the same element as returned by document.elementFromPoint: then we can see it. If a different one, then that foreign element overlays the one we are looking for.

javascript: What is the type of this thing?!?!

So you wonder, what the hell is the type of a something? Stack Overflow to the rescue!

Object.prototype.toString.call('abc') // [object String]
Object.prototype.toString.call(/abc/) // [object RegExp]
Object.prototype.toString.call([1,2,3]) // [object Array]

The full explanation and other ideas are here: http://stackoverflow.com/a/332429/357403