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').off('click').on('click', function(){
                var $this = $(this);

                var images = images2($wrap);
                //Get by attr and will keep getting the same value
                var limit = get_limit($wrap);
                //console.log(limit);

                if(limit > 0 && images.length >= limit){
                    alert('You can not choose more images');
                    return false;
                }

                //This callback will override function SetUrl in /vendor/laravel-filemanager/js/lfm.js
                show({type: 'file'}, function(url, path) {
                    var $holder = $wrap.find('.lfm-thumbs');
                    var field_name = $holder.data('field-name');

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

        $('.lfm').undelegate('.lfm-thumb .remove', 'click')
            .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 detect_media_type(path){
        var type = 'image';

        var pattern = /\.mp4/i;
        var result = path.match(pattern);
        if(result != null){
            type = 'video';
        }

        return type;
    }

    function append(field_name, path, thumb){
        if(typeof thumb == 'undefined'){
            thumb = path;
        }

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

        var img = '<img src="' + thumb + '">';
        var media_type = detect_media_type(path);
        if(media_type == 'video'){
            img = '<img src="/assets/admin/img/video.png">';
        }

        var $thumb = $('<a class="lfm-thumb" href="' + path + '" target="_blank" data-path="' + path + '">' + 
            '<span href="#" class="remove">X</span>' + 
            img + 
            '</a>'
        );
        $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;
    }

    function images2($wrap){
        var $thumbs = $wrap.find('.lfm-thumbs');
        if($thumbs.length == 0){
            return [];
        }

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

        return arr;
    }

    function get_limit($wrap){
        return parseInt($wrap.find('.bt_lfm').data('limit'));
    }

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

$(document).ready(function(){

lfm_app.init();

});

var lfm_app = function(){

function init(){

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

var $wrap = $(this);

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

var $this = $(this);

var images = images2($wrap);

//Get by attr and will keep getting the same value

var limit = get_limit($wrap);

//console.log(limit);

if(limit > 0 && images.length >= limit){

alert('You can not choose more images');

return false;

}

//This callback will override function SetUrl in /vendor/laravel-filemanager/js/lfm.js

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

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

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

append(field_name, path);

});

$('.lfm').undelegate('.lfm-thumb .remove', 'click')

.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 detect_media_type(path){

var type = 'image';

var pattern = /\.mp4/i;

var result = path.match(pattern);

if(result != null){

type = 'video';

}

return type;

}

function append(field_name, path, thumb){

if(typeof thumb == 'undefined'){

thumb = path;

}

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

var img = '<img src="' + thumb + '">';

var media_type = detect_media_type(path);

if(media_type == 'video'){

img = '<img src="/assets/admin/img/video.png">';

}

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

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

img +

'</a>'

);

$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;

}

function images2($wrap){

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

if($thumbs.length == 0){

return [];

}

var arr = [];

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

var $this = $(this);

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

});

return arr;

}

function get_limit($wrap){

return parseInt($wrap.find('.bt_lfm').data('limit'));

}

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

Rex's Personal Site

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

Custom Usage of Laravel Filemanager

M	T	W	T	F	S	S
« Apr				Jun »
		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