CODEWITHSUNDEEP
phplaravellaravel-6file-managerunisharp-file-manager
SinaValipour
SinaValipour

Reputation: 21

Standalone button laravel filemanager

Hi my laravel version is 6 And i installed Unisharp/laravel-filemanager

Im trying to use Standalone button for file manager but i have 404 error like this: my error

This is my button code:

<div class="input-group">
<span class="input-group-btn">
<a href="#" id="lfm" data-input="image" data-preview="holder" class="btn btn-primary">
<i class="fa fa-picture-o"></i> Choose
</a>
</span>
<input id="image" class="form-control" type="text" name="image">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">

and my script is here:

    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
  <script>
      {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/filemanager.js'))  !!};
      var route_prefix = "laravel-filemanager";
      $('#lfm').filemanager('image', {prefix: route_prefix});
  </script>

and my Route is here:

Route::prefix('laravel-filemanager')->middleware('web','auth')->group(function (){
    \UniSharp\LaravelFilemanager\Lfm::routes();
});

Pls help me and write for me true code thanks

Upvotes: 1

Views: 1780

Answers (2)

shahram
shahram

Reputation: 86

Change your script:

<script>
var route_prefix = "/filemanager";</script>



<script>
{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/stand-alone-button.js')) !!}</script>



<script>
$('#lfm').filemanager('image', {prefix: route_prefix});
$('#lfm').filemanager('file', {prefix: route_prefix});</script>

Upvotes: 0

Abbas
Abbas

Reputation: 137

for using standalone button laravel file manager you must add Jquery.js to your page accourding to the doc

add jquery in to head tag

here is my index.blade.php code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="{{asset('css/app.css')}}">

    <!--=== Tiny MCE SCRIPT === -->
    <script src="{{ asset('js/tinymce.min.js') }}"></script>
    <script>
        var editor_config = {
            path_absolute: "/",
            selector: 'textarea#editor',
            relative_urls: false,
            directionality: 'rtl',
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table directionality",
                "emoticons template paste textpattern"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | rtl ltr",
            file_picker_callback: function (callback, value, meta) {
                var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

                var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname;
                if (meta.filetype == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                tinyMCE.activeEditor.windowManager.openUrl({
                    url: cmsURL,
                    title: 'Filemanager',
                    width: x * 0.8,
                    height: y * 0.8,
                    resizable: "yes",
                    close_previous: "no",
                    onMessage: (api, message) => {
                        callback(message.content);
                    }
                });
            }
        };

        tinymce.init(editor_config);
    </script>

    
//load jquery v3.6 (* its important)
    <script src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

//load stand-alone-button
    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>

    <title>test tiny mce editor with image and file upload</title>
</head>
<body>

<textarea id="editor"></textarea>

<hr>

<div class="input-group">
   <span class="input-group-btn">
     <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
       <i class="fa fa-picture-o"></i> Choose
     </a>
   </span>
    <input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">


<script>
    var route_prefix = "laravel-filemanager";
    $('#lfm').filemanager('image', {prefix: route_prefix});
</script>


</body>
</html>

Upvotes: 0

Related Questions