Close elfinder Programatically after File selection

Question

I want my elfinder should be closed automatically after file selection.

<script>
    function upload_slider(){
        var f = $('#elfinder').elfinder({
            url : 'plugins/elfinder/php/connector.php',
            height: 490,
            docked: false,
            dialog: { width: 400, modal: true },
            closeOnEditorCallback: true,
            getFileCallback: function(url) {
                $('#new_file').val(url);
                // CLOSE ELFINDER HERE
            }
        }).elfinder('instance');
    }
</script>

<input type="text" id="new_file" />
<input type="button" onclick="upload_slider();" value="Select File"  />
<div id="elfinder"></div>

How to do this? I've searched many places by cant find appropriate way.

Answer 1

After hours i got a solution for you, as I had exactly the same problem. I think its working ok.

$().ready(function() {
$('#select-button').click(function(){
    var f = $('#elfinder').elfinder({
        url : 'plugins/elfinder/php/connector.php',
        height: 490,
        docked: false,
        dialog: { width: 400, modal: true },
        closeOnEditorCallback: true,
        getFileCallback: function(url) {
            $('#fileurl').val(url);
            // CLOSE ELFINDER HERE
            $('#elfinder').remove();  //remove Elfinder
            location.reload();   //reload Page for second selection
        }
    }).elfinder('instance');
});

})

Answer 2

The answer was close, but having to reload the page was not an option for me. What we're doing is removing the elfinder div... So it seems to me that if we have code to create it at the beginning, we don't have to reload to get it back.

<div id="elfcontain"></div>

---------------------------------------------------------------------------

function filebrowser() {
$('#elfcontain').append('<div id="elfinder"></div>');
    var elf = $('#elfinder').elfinder({     
    url: 'data/connector/connector.php',  // connector URL (REQUIRED)        
    getFileCallback: function(url) {
        console.log(url);
        $('#elfinder').remove();
        return url;
    }
    }).elfinder('instance');
}

Just an FYI to anyone who finds themselves in this situation. Since we create the elfinder div each time, you can now hide/show it to your heart's content without having to reload.

Answer 3

Is much easier than you think.

   getFileCallback: function (filePath, fm) {
     fm.hide();
   }