Elfinder: How can I open elfinder in a new window and get selected image path from it?

Created on 20 Sep 2013 · 11Comments · Source: Studio-42/elFinder

I want to open elfinder in a new window, like

window.open('path_to_el_finder', '_blank', 'height=520,width=950')

And if I select some file, I want to get it in my input field.
I think it is possible, but I cannot find the solution.

Source

ghost

👍1

Most helpful comment

Sorry, already figured out:

$('#elfinder_button').live('click', function() {
            $('<div id="editor" />').dialogelfinder({
                url : '{{ path('ef_connect') }}',
                getFileCallback: function(file) {
                    $('#editor').dialogelfinder('close');
                    $('#editor').closest('.elfinder').val(file.path);
                    console.log($('#editor').closest('.elfinder-input'));
                    console.log(file.url);
                }
            });
        });

ghost on 20 Sep 2013

👍2

All 11 comments

Sorry, already figured out:

$('#elfinder_button').live('click', function() {
            $('<div id="editor" />').dialogelfinder({
                url : '{{ path('ef_connect') }}',
                getFileCallback: function(file) {
                    $('#editor').dialogelfinder('close');
                    $('#editor').closest('.elfinder').val(file.path);
                    console.log($('#editor').closest('.elfinder-input'));
                    console.log(file.url);
                }
            });
        });

ghost on 20 Sep 2013

👍2

try:

         $('<div \>').dialog({modal: true, width: "80%", title: "Select your file", zIndex: 99999,
                create: function(event, ui) {
                    $(this).elfinder({
                        resizable: false,
                        url: "path to connector",
                        commandsOptions: {
                          getfile: {
                            oncomplete: 'destroy' 
                          }
                        },                            
                        getFileCallback: function(file) {
                            document.getElementById('fileurl').value = file; 
                            jQuery('a.ui-dialog-titlebar-close[role="button"]').click();
                        }
                    }).elfinder('instance')
                }
            });

grigv2000 on 6 Oct 2013

👍1

Hi,

Does this code opens elfinder in a modal window ?

Where should I paste this code ?

That would be a good begining for me because i'd like to open elfinder in a modal window using ckeditor.

Thx

philouphil on 30 Oct 2013

I made something so i can put elfinder in a fancybox modal.
Maby the code helps you..

function elFinder()
    {
    elfinderrel = $('#elfinderselect').attr('rel');

    $('#elfinderselect').elfinder(
    {
        lang: 'nl',
        url: 'framework/apps/elfinder/php/connector.php', // connector
        urlUpload: 'framework/apps/elfinder/php/connector.php',
        uiOptions:
            {
            // toolbar configuration
            toolbar:
                [
                    ['back', 'forward'],
                    ['reload'],
                    ['mkdir', 'mkfile', 'upload'],
                    ['open', 'download', 'getfile'],
                    ['info'],
                    ['quicklook'],
                    ['copy', 'cut', 'paste'],
                    ['rm'],
                    ['duplicate', 'rename', 'edit', 'resize'],
                    ['extract', 'archive'],
                    ['search'],
                    ['view']
                ]
            },
            commandsOptions:
            {
            getfile:
            {
                oncomplete: 'destroy'
            }
            },
            getFileCallback: function(file)
            {
            console.log(elfinderrel);

            returnvalue = elfinderrel;
            $('.'+returnvalue).val(file['path']);
            $.fancybox.close();
            }
    }).elfinder('instance');
    }

    $('#elfinder_button').live('click', function()
    {
    thisbutton = $(this);
    thisbuttonrel = $(this).attr('rel');

    $.fancybox({
        content: '<div id="elfinderselect"></div>',
        afterShow: function()
        {
        console.log(thisbuttonrel);
        $('#elfinderselect').attr('rel', $(thisbutton).attr('rel'));
        elFinder();
        },

        closeBtn: false,
        maxWidth: 900,
        maxHeight: 700
    });
    });

rickerd on 24 May 2014

is there a way to do this using pure javascript and not by using jQuery?

michaeljanea on 3 Apr 2015

NAVER - http://www.naver.com/

[email protected] 님께 보내신 메일

받는 사람이 회원님의 메일을 수신차단 하였습니다.

lovesia on 3 Apr 2015

Im sure there is a way to achieve this withouten any Jquery.
I dont know how because i use Jquery all the time.
I dont fancy long JavaScript codes in my projects.

rickerd on 3 Apr 2015

i don't think it will be a long code.. here's an example for the CKFinder

var finder = new CKFinder();
finder.callback = function(api){
api.hideTool('f0');
api.hideTool('f2');
};
finder.selectActionFunction = function(fileUrl){
el.parentElement.children[0].value = fileUrl;
};
finder.popup();

michaeljanea on 3 Apr 2015

Cool! But i still dont know how to build a modal in pure JS.
It just works with Jquery, you'll have to build it yourself.

rickerd on 3 Apr 2015

it will be fine if it does not using a modal.

michaeljanea on 3 Apr 2015