Estoy usando TinyMCE en un proyecto y quiero que el usuario seleccione y cargue imágenes al servidor usando su ventana de inserción de imágenes predeterminada.

Quiero hacer clic en el siguiente botón:

Abra la ventana de selección de archivos predeterminada del navegador y agregue la imagen seleccionada al editor:

Mi código hasta ahora es el siguiente ...

JS:

tinymce.init({
        selector: '#html-editor',
        language: 'pt_PT',
        plugins: [
            "bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code media nonbreaking",
            "table contextmenu directionality paste textcolor colorpicker imagetools"
        ],
        add_unload_trigger: false,
        toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table",
        image_advtab: true,

        file_picker_callback: function (callback, value, meta)
        {
            $('#html-editor input').click();

            //how to get selected image data and add to editor?
        },

        paste_data_images: true,
        images_upload_handler: function (blobInfo, success, failure)
        {
            // no upload, just return the blobInfo.blob() as base64 data
            success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
        }
    });

HTML:

<div id="html-editor">
    <input name="image" type="file" style="width:0;height:0;overflow:hidden;">
</div>

¿Qué tipo de cambios debo hacer alfile_picker_callback evento para obtener el archivo seleccionado y agregarlo al editor?