CODEWITHSUNDEEP
ckfinder
vick
vick

Reputation: 13

Ckfinder Enhancing HTML forms

How to do like this function

http://cksource.com/ckfinder/demo#forms

I used ckfinder. Thanks.

Upvotes: 0

Views: 1305

Answers (1)

Jonas
Jonas

Reputation: 30

You will need an input field and a button. The input field can be hidden.

<script src="/ckfinder/ckfinder.js" type="text/javascript"></script>
<script type="text/javascript">
    function BrowseServer() {
        var finder = new CKFinder();
        finder.basePath = _finderBasePath;
        finder.selectActionFunction = SetFileField;
        finder.popup();
    }
    function SetFileField(fileUrl) {
        $("#ImageUrl").val(fileUrl); //ImageUrl is the Id of the input field
    }
    $(function () {
        $("#FileBrowse").on("click", BrowseServer); //FileBrowse is the Id of the button
    });
</script>

OR: To make it more dynamic you could make the click event more generic. In the data-target attribute on the button input the Id of the field. This way you can have multiple instances without copy/pasting code.

<input class="large" id="Image" name="Image" type="text" value="">
<input type="button" id="FileBrowseImage" value="Browse file" class="fileBrowse" data-target="Image">

<script type="text/javascript">
        $(function () {
            $(".fileBrowse").on("click", function () {
                var finder = new CKFinder();
                var target = $(this).attr('data-target');
                finder.selectActionFunction = function (fileUrl, data) {
                    document.getElementById(target).value = fileUrl;
                }
                finder.popup();
            });
        });
    </script>

Upvotes: 0

Related Questions