javascriptjqueryelfinder

How to check for specific folder with Elfinder


I have an application that is using Elfinder. Upon uploading, I need to check if files are being uploaded to a specific folder, for example "DIRECTOR" folder, also to open that folder when a button is clicked.

Get folder name when:
1. File is being uploaded
2. Button is clicked

I have tried adding the commandsOptions, setting folders to true, but I only get the folder information when I select one file. I need to know the folder name every time a file gets uploaded into that folder. I also used getFileCallback in the bind('upload'), but I don't get the path property. I only get the "path" property when I double-click. Does anybody know the correct function to use or how I can get the folder name?

<div id="openFolderDiv">
    <button type="button" id="openFolderBtn"/>
    <label id="lblOpenFolderBtn">Open Director Folder</label>
</div>

$('#openFolderBtn').click(function () {
    // open "DIRECTOR" folder      
});

var options = {
    commands: myCommands,
    commandsOptions: {
        getfile: {
            folders: true
        }
    },
    getFileCallback: function (file) {
        if (file.path.includes("DIRECTOR")) {
            return file.path;
        }
    },
};

elfinder.bind('upload', function (event, instance) {
    var path = options.getFileCallback(event, instance);
});

Another problem I'm getting is when I double-click to open a folder, the getFileCallback function gets fired but the folder doesn't open.


Solution

  • I was able to find the answer a while back, here was my solution: In the select handler, I was able to get the folder name by decoding the base64url that was converted from the hashstring of the elfinder item.

        var options = {
                url: '../connector.ashx',
                uiOptions: {
                    toolbar: [
                        ['mkdir', 'mkfile', 'upload'],
                        ['open', 'download'],
                        ['copy', 'cut', 'paste'],
                        ['duplicate', 'rename', 'edit'],
                        ['search']
                    ]
                },
                handlers: {
                    select: function (event, elfinderInstance) {
                        if (event.data.selected.length == 1) {
                            var item = $('#' + event.data.selected[0]);
                            var hashString = item.selector;
                            var folderPath = parseToken(hashString);
                            var folderName = folderPath.split("\\")[1];
                            if (folderName.toUpperCase() == "DIRECTOR") {
                                $('#submitDataBtn').show();
                            }
                        }
                    }
                }
            };
            var elfinder = $('#elfinder').elfinder(options).elfinder('instance');
    
            function parseToken (token) {
                var base64Url = token.split('_')[1];
                var folderPathDecoded = decodeBase64Url(base64Url);
                return folderPathDecoded;
            };
    
            function decodeBase64Url(s) {
                var e = {}, i, b = 0, c, x, l = 0, a, r = '', w = String.fromCharCode, L = s.length;
                var A = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
                for (i = 0; i < 64; i++) { e[A.charAt(i)] = i; }
                for (x = 0; x < L; x++) {
                    c = e[s.charAt(x)]; b = (b << 6) + c; l += 6;
                    while (l >= 8) { ((a = (b >>> (l -= 8)) & 0xff) || (x < (L - 2))) && (r += w(a)); }
                }
                return r;
            };