TinyMCE file_picker_callback select image server directory of already uploaded images

I already have working script for uploading new images to the server which I access via: INSERT > IMAGE > UPLOAD

however, sometimes I need to use image which I uploaded already, therefore Im looking for some file_picker_callback() script which would let me browse in the selected directory on the server (not hdd of user) where I upload images and let me choose the one I wish.

I havent find out any of the script which would do that, so I was hoping someone can point me out for anything free to use.

I load it like this:

<script>
    tinymce.init({
        selector: "#mytextarea",
        language: "en",
        plugins: "wordcount autolink link preview charmap directionality fullscreen emoticons media paste save spellchecker table searchreplace visualblocks quickbars image imagetool moxiemanager",
        menubar: "file edit view insert format table tools",

        image_advtab: true,
        paste_data_images: true,

        default_link_target: "_blank",
        automatic_uploads: true,
        file_picker_types: 'image',

        relative_urls: false,
        remove_script_host: false,
        document_base_url: "http://www.somehost.com/",
        images_upload_url: '../uploadChecker.php',
        images_upload_credentials: true,

        file_picker_callback: function(callback, value, meta) {
        },
    });
</script>

I am able to achieve this by creating a page to display all image files on the server and then use custom URL dialog to open that page. The external page will send image URL back to TinyMCE through browsers' window.postMessage API. The URL dialogue will use onMessage event listener to catch the image URL and pass it to the image dialogue through callback() in file_picker_callback.

This is my file_picker_callback function:

file_picker_callback: function (callback, value, meta) {
        var fileBrowseUrl =  "images.html"; //external page
        tinyMCE.activeEditor.windowManager.openUrl({
          url: fileBrowseUrl,
          title: 'Server File Browser',
          width: 800,
          height: 600,
          resizable: "yes",
          onMessage: function (api, data) {
            callback(data.src, {alt: data.alt});
          }

This is the jQuery script in the external page "imges.html" that listens to click events on images and send image URL and alt text back to the URL dialogue:

$('body').on('click', 'img', function (e) {
                var imgSrc = $(this).prop('src');
                var imgAlt = $(this).prop('alt');
                //send image url back to TinyMce
                window.parent.postMessage({
                    mceAction: 'customAction',
                    src: imgSrc,
                    alt: imgAlt
                });
                //close external page and return to TinyMce
                window.parent.postMessage({
                    mceAction: 'close'
                });
            });

Demo codes can be find here: https://github.com/jeffhehe/TinyMce-file-picker-callback-demo