Standalone CKFinder: how to only select images in file dialog popup?

Question

I'm using CKFinder in combination with CKEditor, but also as standalone file input image popup window. So when someone clicks the "upload"-button, a new popup window appears in which someone could select an image / file / Flash-file to upload. For the field "avatar" I need to only select image files. It shouldn't be possible to select another filetype. How can I get this working? In the documentation I can't find very helpful information.

In CKEditor it's possible to only select an image or a file from within the CKFinder-popup, but it looks like the same option has been forgotten in the standalone version of CKFinder. I need to achieve "ckfinder.html?type=Image", but I don't want to modify ckfinder.js because that will affect also other file popup dialogs in which someone should be able to select even images as files.

I'm including CKFinder like in the popup sample:

var finder = new CKFinder();
finder.basePath = '../';    // The path for the installation of CKFinder (default = "/ckfinder/").
finder.selectActionFunction = SetFileField;
finder.popup();

Thanks in advance for your help!

Answer 1

you should try it, *

LoadImage

is id of button select file,

picUrl

is id of text link

$('#LoadImage').click(function () {
    var finder = new CKFinder();
    finder.selectActionFunction = function (fileUrl) {
        fileUrl = fileUrl.substring(fileUrl.lastIndexOf("/") + 1);
        $('#picUrl').val = (fileUrl);
    }
    selectFileWithCKFinder('picUrl');
})
function selectFileWithCKFinder(elementId) {
    CKFinder.popup({
        chooseFiles: true,
        width: 800,
        height: 600,
        onInit: function (finder) {
            finder.on('files:choose', function (evt) {
                var file = evt.data.files.first();
                var output = document.getElementById(elementId);
                output.value = file.getUrl();
            });

            finder.on('file:choose:resizedImage', function (evt) {
                var output = document.getElementById(elementId);
                output.value = evt.data.resizedUrl;
            });
        }
    });
}