Custom Usage of Laravel Filemanager

HTML

{{--
@php
  $field = ['tag_icon', 'Label icon image'];
  $value = val($row, $field[0]);
  $cp_data = [
    'field'=>$field, 
    'value'=>$value, 
    'locales' => $locales,
    'model' => $row
  ];
@endphp
@component('admin.components.form.image', $cp_data)
@endcomponent
--}}

<div class="form-group lfm">
    <label for="{{$field[0]}}" class="col-md-3 control-label">
        {{$field[1]}}
        @if(isset($field[2]) && $field[2] == true)
        *
        @endif
    </label>
    <div class=" col-md-9">
        <div>
            <a data-input="thumbnail" data-preview="holder" class="btn btn-primary bt_lfm" style="color: #FFF;" >
                <i class="fa fa-picture-o"></i> Choose
            </a>
        </div>
        <div class="lfm-thumbs" data-field-name="{{$field[0]}}">
            
        </div>
    </div>
</div>

{{--

@php

$field = ['tag_icon', 'Label icon image'];

$value = val($row, $field[0]);

$cp_data = [

'field'=>$field,

'value'=>$value,

'locales' => $locales,

'model' => $row

];

@endphp

@component('admin.components.form.image', $cp_data)

@endcomponent

--}}

@if(isset($field[2]) && $field[2] == true)

@endif

</label>

<div>

<i class="fa fa-picture-o"></i> Choose

</a>

</div>

</div>

Javascript (lfm_app.js):

$(document).ready(function(){
    lfm_app.init();
});

var lfm_app = function(){
    function init(){
        $('.lfm').each(function(index){
            var $wrap = $(this);

            $wrap.find('.bt_lfm').on('click', function(){
                var $this = $(this);

                show({type: 'image'}, function(url, path) {
                    var $holder = $wrap.find('.lfm-thumbs');
                    var field_name = $holder.data('field-name');

                    append(field_name, path);
                });
            });
        });

        $('.lfm').delegate('.lfm-thumb .remove', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            $this.parent().remove();
        });
    }

    function show(options, cb) {
        var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';

        window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
        window.SetUrl = cb;
    }

    function append(field_name, path){
        var $thumbs = $('.lfm .lfm-thumbs[data-field-name="' + field_name + '"]');

        var $thumb = $('<a class="lfm-thumb" href="' + path + '" target="_blank" data-path="' + path + '">' + 
            '<span href="#" class="remove">X</span>' + 
            '<img src="' + path + '">'
        );
        $thumbs.append($thumb);
    }

    function images(field_name){
        var $thumbs = $('.lfm .lfm-thumbs[data-field-name="' + field_name + '"]');
        if($thumbs.length == 0){
            return [];
        }

        var arr = [];
        $thumbs.find('.lfm-thumb').each(function(index){
            var $this = $(this);
            arr.push($this.data('path'));
        });

        return arr;
    }

    return {
        init: init, 
        show: show, 
        append: append, 
        images: images
    }
}();

$(document).ready(function(){

lfm_app.init();

});

var lfm_app = function(){

function init(){

$('.lfm').each(function(index){

var $wrap = $(this);

$wrap.find('.bt_lfm').on('click', function(){

var $this = $(this);

show({type: 'image'}, function(url, path) {

var $holder = $wrap.find('.lfm-thumbs');

var field_name = $holder.data('field-name');

append(field_name, path);

});

$('.lfm').delegate('.lfm-thumb .remove', 'click', function(e){

e.preventDefault();

var $this = $(this);

$this.parent().remove();

});

}

function show(options, cb) {

var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';

window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');

window.SetUrl = cb;

}

function append(field_name, path){

var $thumbs = $('.lfm .lfm-thumbs[data-field-name="' + field_name + '"]');

var $thumb = $('<a class="lfm-thumb" href="' + path + '" target="_blank" data-path="' + path + '">' +

'<span href="#" class="remove">X</span>' +

'<img src="' + path + '">'

);

$thumbs.append($thumb);

}

function images(field_name){

var $thumbs = $('.lfm .lfm-thumbs[data-field-name="' + field_name + '"]');

if($thumbs.length == 0){

return [];

}

var arr = [];

$thumbs.find('.lfm-thumb').each(function(index){

var $this = $(this);

arr.push($this.data('path'));

});

return arr;

}

return {

init: init,

show: show,

append: append,

images: images

}

}();

Usage:

//var images = lfm_app.images('field_name');
//lfm_app.append('field_name', '/photo/1234.jpg');
@if(val($row, 'tag_icon') != false)
  @php
    echo "lfm_app.append('tag_icon', '" . val($row, 'tag_icon') . "');";
  @endphp
@endif

//var images = lfm_app.images('field_name');

//lfm_app.append('field_name', '/photo/1234.jpg');

@if(val($row, 'tag_icon') != false)

@php

echo "lfm_app.append('tag_icon', '" . val($row, 'tag_icon') . "');";

@endphp

@endif

M	T	W	T	F	S	S
« Apr
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Custom Usage of Laravel Filemanager