Elfinder: open new blank window and run elfinder

Created on 20 May 2017  路  1Comment  路  Source: Studio-42/elFinder

i have address like

site.com/elfinder/simple
i need after click to a button open new blank window and open this address then after click a image return the url.

i dont need use method elfinder dialog . because i cant load css,js,,,, in master page

howto

Most helpful comment

An easy way would be to use a modal which loads elFinder in iframe.
You can then use parent.myFunction() to close(destroy/hide) the iframe modal and return the selected image url to parent page.

In fact this is similar to how TinyMCE handles it.

To prevent elFinder from reloading from scratch each time you hit the button, it will be good to use some logic to check if the iframe already exists, if it does, .show() it, if it does not, create it

//elFinder main.js file (in the modal iframe)
getFileCallback: function(file) {
    var returnUrl = file.url;
    parent.getElfinderUrl(returnUrl);
}

//parent page
function getElfinderUrl(url){
    $("input.elfinder").val(url);
    $("iframe.elfinder").hide(); // or .remove()
}

//parent page
$("button.elfinder").on("click", function(){
    if($("iframe.elfinder").length){
        if(!$("iframe.elfinder").is(":visible")){
          $("iframe.elfinder").show();
        }
    }
    else{
        $("<iframe src='elfinder.html' class='elfinder' />").appendTo("body"); // use CSS to make look like a proper modal
    }
});
//add a modal close button somewhere with the same idea

>All comments

An easy way would be to use a modal which loads elFinder in iframe.
You can then use parent.myFunction() to close(destroy/hide) the iframe modal and return the selected image url to parent page.

In fact this is similar to how TinyMCE handles it.

To prevent elFinder from reloading from scratch each time you hit the button, it will be good to use some logic to check if the iframe already exists, if it does, .show() it, if it does not, create it

//elFinder main.js file (in the modal iframe)
getFileCallback: function(file) {
    var returnUrl = file.url;
    parent.getElfinderUrl(returnUrl);
}

//parent page
function getElfinderUrl(url){
    $("input.elfinder").val(url);
    $("iframe.elfinder").hide(); // or .remove()
}

//parent page
$("button.elfinder").on("click", function(){
    if($("iframe.elfinder").length){
        if(!$("iframe.elfinder").is(":visible")){
          $("iframe.elfinder").show();
        }
    }
    else{
        $("<iframe src='elfinder.html' class='elfinder' />").appendTo("body"); // use CSS to make look like a proper modal
    }
});
//add a modal close button somewhere with the same idea
Was this page helpful?
0 / 5 - 0 ratings