Preview doesnt show

[tugamars]

I have a standalone button (code below) and when i click it everything works as expected but after i select and confirm an image on the filemanager it self the input field is setted with the correct URL for the image but the preview part doesnt work. The with holder id doesnt even change src.

<a id="lfm" data-input="logo" data-folder="/teams/logos" data-preview="holder" class="btn btn-primary"> <i class="fa fa-picture-o"></i> Escolher </a>
<img id="holder" src="" style="margin-top:15px;max-height:100px;">

$('#lfm').filemanager('image', { folder: $(this).data('folder'), prefix: '<?php echo '/'.explode('/', env('APP_URL'), 4)[3] ?>/filemanager' });

I followed everything in the installation, integration and upgrade guides. Previously i had version 1.8 and everything worked fine.

P.S.: Found another 'bug', despite i have the 'folder' option it always opens in root/main folder.

• Operating system : Linux
• Laravel version : 6.18.0
• Package version : 2.0
• Steps to reproduce your issue : Select image with standalone button
• Screenshots of browser console : http://prntscr.com/rdit7e

[ORN-Fox]

Same problem in v2.1 !

[ORN-Fox]

I've been looking for the reason for this problem and I just found it!

Until v1.9.x the js of the standalone button did this (line 16 to 18 in
https://github.com/UniSharp/laravel-filemanager/blob/v1.9.2/public/js/lfm.js)
//set or change the preview image src var target_preview = $('#' + localStorage.getItem('target_preview')); target_preview.attr('src', url).trigger('change');

and today in v2.x the js has changed and does this now (line 24 and 25 in
https://github.com/UniSharp/laravel-filemanager/blob/v2.1.0/public/js/stand-alone-button.js)
target_preview.append( $('<img>').css('height', '5rem').attr('src', item.thumb_url) );

So in v1.9.x the js changes the src attribute of the img tag with the id #holder and in v2.x the js adds an img tag with the right src in an element (example a div) with the id #holder.

Solution for v2.x, replace <img id="holder" ...> in your code per <div id="holder" ...>
for fix this problem.

Why such a change and the documentation is not yet 100 % up to date in this case ;)

[safarovitch]

I don't know why @streamtw desided to do it so but here is the quick fix.

Just creat ea js file and put the following code inside.

*(function( $ ){

$.fn.filemanager = function(type, options) {
type = type || 'file';
this.on('click', function(e) {
var route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
var target_input = $('#' + $(this).data('input'));
var target_preview = $('#' + $(this).data('preview'));
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
window.SetUrl = function (items) {
var file_path = items.map(function (item) {
return item.url;
}).join(',');

    // set the value of the desired input to image url
    target_input.val('').val(file_path).trigger('change');

    // clear previous preview
    target_preview.html('');

    // set or change the preview image src
    items.forEach(function (item) {
      target_preview.attr('src', item.thumb_url).trigger('change');
    });

    // trigger change event
    target_preview.trigger('change');
  };
  return false;
});

}
})(jQuery);

Insted of including standalone-js from unisharp just include the js file you just created.
That's it

[SajjadAemmi]

@ORN-Fox
Your Solution for v2.x works for me. Thanks.