How can i manually attach the thumbnail img to the file item

[z-igniter]

Hi, first off, thank you for this awesome file manager. I am using file manager with codeigniter and it works nice to me except file thumbnails not showing.Actually, i had a certain success with the example posted here (codeigniter implementation) but then i ran into the conflict with the require.js and other plugins am using.(I am using standalone Blade lib for templates and a bunch of js plugins + loading pages by ajax).So after a significant time spent on debugging , i gave up and thought i could attach thumbnails manually over some elfinder init function/event or even upon initialization.Note, thumbnails are generated and i can access them via browser.Would you be so nice and suggest me the best way? Thanks,Z.

[nao-pon]

@z-igniter When the display becomes necessary on elFinder, the client side issues a tmb command to request the connector side to create a thumbnail. It is such a mechanism to be able to create sequentially when there are a large number of image files.

If any errors occur on the client side, I think that the first decision is to identify the cause and correct it.

Does your integrated app intercept the DOM scrolling events?

[z-igniter]

Yes it does. Btw, i ended with this solution which partially did the job.The problem i have now is thumbnails show up on first page load nicely but fail on every next one (i load html partials over ajax), if i reload the page from the addr bar or browser refresh btn they show up again.Here is my partial and the function which is called.

var fileManager = function(connector){

    function getThumbnails(files){
        let ids = [];
        $.each(files, function(i, file) {
            if(file.mime !== 'directory'){
                ids.push([file.hash,file.tmb]);
            }
        });
        if(ids.length !== 0) {
            setTimeout(function () {
                $.each(ids, function (i, v) {
                    $('#' + v[0]).find('.elfinder-cwd-icon').addClass('elfinder-cwd-bgurl').css('background', 'url(' + site_root + 'files/.tmb/' + v[1] + ')');
                });
            }, 150);
        }
    }

    let ids = [];

    $('#elfinder').elfinder(
        // 1st Arg - options
        {
            baseUrl : './',                    // Base URL to css/*, js/*
            url : connector,  // connector URL (REQUIRED)
            lang: 'en',                    // language (OPTIONAL)
            getFileCallback : function(file, fm) {
                //console.log(file.tmb);
                fm.path(file.hash, false, true).done(function(path) {
                    fm.exec('quicklook');
                }).fail(function() {

                });
            },
            handlers : {
                open : function(event) {
                    let files = event.data.files;
                    if(files.length !== 0)
                        getThumbnails(files);
                },
                opendir:function(event){
                    console.log('opendir: ' + event);
                }
            }
        },
        // 2nd Arg - before boot up function
        function(fm, extraObj) {
            // `init` event callback function
            fm.bind('init', function() {
                // Optional for Japanese decoder "encoding-japanese.js"
                if (fm.lang === 'ja') {
                    fm.loadScript(
                        [ '//cdn.rawgit.com/polygonplanet/encoding.js/1.0.26/encoding.min.js' ],
                        function() {
                            if (window.Encoding && Encoding.convert) {
                                fm.registRawStringDecoder(function(s) {
                                    return Encoding.convert(s, {to:'UNICODE',type:'string'});
                                });
                            }
                        },
                        { loadType: 'tag' }
                    );
                }
            });
            // Optional for set document.title dynamically.
            var title = document.title;
            fm.bind('open', function() {
                var path = '',
                    cwd  = fm.cwd();
                if (cwd) {
                    path = fm.path(cwd.hash) || null;
                }
                document.title = path? path + ':' + title : title;
            }).bind('destroy', function() {
                document.title = title;
            });
        }
    );
};

[nao-pon]

@z-igniter Please take a look at the browser console for errors.

[z-igniter]

I can see no errors

[nao-pon]

@z-igniter I think that it is better to add thumbnail information on the connector side than to process on the client side.

class elFinderVolumeMyLocalFileSystem extends elFinderVolumeLocalFileSystem
{
    protected function updateCache($path, $stat) {
        $stat = parent::updateCache($path, $stat);
        if ($stat && substr($stat['mime'], 0, 5) === 'image') {
            $stat['tmb'] = $stat['hash'];
        }
        return $stat;
    }
}

[z-igniter]

thanks for the suggestion, ive found an error and it works nice with my solution now.