This sample show how to use File Browser opening it in a new browser window (with window.open method)

FileBrowser.aspx is open in a new window with three parameters: fn (the name of the callback function), caller (the window to which the function belong - opener for the opener window) and (optional) langCode.

<script>>
    /* Note.: jQuery SHOULD BE LOADED for the examples on this page are working properly */

    //CallBack function
    function newWinFn(fileurl) {
        $('#newWinField').val(fileurl);
    }
    $(function () {
        // Button click event
        $('#newWinBtn').on('click', function (e) {
            e.preventDefault();
            var top = window.screenTop + 50;
            var left = window.screenLeft + 50;
            window.open('/FileBrowser/FileBrowser.aspx?caller=opener&fn=newWinFn&langCode=en', 'fileBrowser', 'top=' + top + ',left=' + left + ',menubar=0,scrollbars=0,toolbar=0,height=550,width=700');
        })
    });
</script>
            

This sample show how to use File Browser opening it in a bootstrap modal dialog using iframe.

FileBrowser.aspx is hosted in a iframe element with three parameters: fn (the name of the callback function), caller (the window to which the function belong - parent for parent of iframe) and (optional) langCode.

<div class="modal fade" id="FileBrowserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="H1">File browser</h4>
            </div>
            <div class="modal-body">
                <iframe id="FB_frame"></iframe>
            </div>
        </div>
    </div>
</div>
<script>>
    /* Note.: jQuery SHOULD BE LOADED for the examples on this page are working properly */

        function fileBrowserCallBack(fileurl) {
            $('#modalField').val(fileurl);
            $('#FileBrowserModal').modal('hide');
        }

        // Loading of iframe content is postposed to not slow down page loading
        $(function () {
            $(window).on('load', function () {
                $('#FB_frame').attr('src', '/FileBrowser/FileBrowser.aspx?caller=parent&fn=fileBrowserCallBack&langCode=en');
            });
        })
</script>