Search code examples
phplaravelunisharp-file-manager

404 not found when using laravel filemanager package


I have no problem using the filemanager.

This means that when I create a post, for example an article with a photo, I do it without any problem.

But when I try to edit the post, the part where I put the standalone Button can not load the file manager and gives a 404 error

Maybe my main problem is in the route part that I did not fully understand

web.php code

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

Route::get('/admin/category/edit/{category}', [CategoryController::class, 'edit'])
    ->name('edit.category')
    ->middleware('auth:admin');

//update
Route::put('/admin/category/edit/{category}', [CategoryController::class, 'update'])
    ->name('update.category');

this is create_category.blade.php

<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>


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

so far , every thing work correctly but In the edit_category.blade.php when I click on the button on the edit page, I see a 404 error i know my problem is about route but I dont Know how to fix it

edit_cateogry.blade.php standalone button

{{--========== file manager--}}
                <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" contenteditable="false" class="form-control" type="text" name="filepath">
                    <br>
                </div>
                @error('filepath')
                <label class="aslert alert-danger badge-pill">{{$message}}</label>
                @enderror

                <img id="holder" style="margin-top:15px;max-height:100px;">
                <script>
                    var route_prefix = "laravel-filemanager";
                    $('#lfm').filemanager('image', {prefix: route_prefix});
                </script>

Solution

  • What version of Laravel and package do you use?

    If you are using version laravel 8, install this version of the package:

    "unisharp/laravel-filemanager": "v2.2.0"