In a recent blog entry, we showed how to load a local document using pure Javascript and an HTML input element. In this second part, we show how to hide the HTML input element and to overwrite the Open functionality in the ribbon bar.

The input element is hidden using the CSS property display:

<input style="display: none; margin-bottom: 20px;" type="file" id="fileinput" />
<cc1:TextControl ID="TextControl1" runat="server" />

Using Javascript, a new event is attached to the Load menu item of the ribbon bar. The newly attached event is raised before it is bubbled to Web.TextControl. This enables the cancellation of the default functionality of the ribbon item in order to add your own action:

TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
      addAction();
});

function addAction() {
    document.getElementById("fileMnuItemOpen").addEventListener("click",
        function (e) {
            document.getElementById('fileinput').click();
            e.cancelBubble = true;
        });
}

When clicking the Open menu item now, the local Open File dialog is opened. Users can now upload local files or files from connected cloud services such as OneDrive:

Download the sample from GitHub and test it on your own.