Select Image for user profile

[lon-io]

Hi Bestmomo, seems I've really been 'issue raising' this past few days. I'm trying to allow the user to select an image from the file manager and I have implemented it to open the manager in a window similar to how the ckeditor picture plugin does, how ever, the select option is not showing up.

Essentially I have a button - select image - routed like you did with the medias button on your dashboard code, that opens a window based on the following script:

    var urlobj;

    function BrowseServer(obj)
    {
        urlobj = obj;
        OpenServerBrowser(
                '../../filemanager',
                screen.width * 0.7,
                screen.height * 0.7 ) ;
    }

    function OpenServerBrowser( url, width, height )
    {
        var iLeft = (screen.width - width) / 2 ;
        var iTop = (screen.height - height) / 2 ;
        var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
        sOptions += ",width=" + width ;
        sOptions += ",height=" + height ;
        sOptions += ",left=" + iLeft ;
        sOptions += ",top=" + iTop ;
        var oWindow = window.open( url, "BrowseWindow", sOptions ) ;
    }

    function SetUrl( url, width, height, alt )
    {
        document.getElementById(urlobj).value = url ;
        oWindow = null;
    }

the window is loaded with my filemanager.blade view and displays the file manager porperly, but the select button is not available and I need this to get the image url. Thanks in advance!

[bestmomo]

Do you mean there is not the button "Select" in Filemanager to select the image ? In this case there is a config setting in filemanager.config.js.

[lon-io]

Yes, exactly, the button "Select" in Filemanager to select the image is not showing. However with the CKEditor image button, it shows and I can select the image. I have checked the filemanager.config.js. file and the only thing that could affect this is the "browseOnly" option which in my case is correctly set to false. The only buttons showing are: "Parent folder", "Download", "Rename", "Delete" and "Replace file", there's no "Select" button

[lon-io]

[lon-io]

[lon-io]

The first picture is from my copy of your example app, the second is from my own app

[bestmomo]

If you set this url

OpenServerBrowser(
                '../../filemanager?CKEditor=content',

You'll have your button ;)

[lon-io]

I've just tried that but it didn't work. I don't think 'CKEditor' should be in the url since I am not using ckeditor here to select the image. I am using a normal button like this:

"button type="button" onclick="BrowseServer('card');

to trigger the script to open filemanager where card is the id of my input:

"input type="text" class="form-control" name="card" autofocus id="card" value="{{ $card }}"

[bestmomo]

Yes but filemanager script check params to set the select button :

if($.inArray('select', capabilities)  != -1 && ($.urlParam('CKEditor') || window.opener || window.tinyMCEPopup || $.urlParam('field_name'))) template += '<button id="select" name="select" type="button" value="Select">' + lg.select + '</button>';

If you use for example :

.../filemanager/index.html?field_name=something

There is the select button.

[lon-io]

It worked man! I actually had to set the param at my controller:

public function filemanager(){ $url = config('achieve.url').'?field_name=card'; return view('auth.dashboard.filemanager',compact('url')); }

You're the best man! You've been saving my ass these past few days. I was almost losing it on this one!

[lon-io]

Sorry man, but upon clicking the select button, nothing happens, however I can see from my chrome dev tool console that FileManager is trying to send the url to the "card" field which is in a different window from the file manager window. Is there a work around to get the image url sent back to the parent windows "card" input upon clicking select?

[bestmomo]

Hi, When I look at filemanager code I see this line :

if($.urlParam('field_name')){
    parent.document.getElementById($.urlParam('field_name')).value = url;

So url is setted on parent page with field_name id. It's behavior for tinymce and colorbox. You should ask Simon Georget on this point as he's the writer of this code.

[lon-io]

Alright, thank you, I'll close this now