UniSharp / laravel-filemanager

Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
https://unisharp.github.io/laravel-filemanager/
MIT License
2.08k stars 720 forks source link

Getting Page Expired on upload Image #551

Closed dennysutanto closed 5 years ago

dennysutanto commented 6 years ago

Hi, i failed to upload image using the latest version. This is what i have in my composer.json "unisharp/laravel-filemanager": "~1.8"

Below is my details

When i click the "Send it to the Server" button after selecting the Image to upload, the page just stay where it is. In my browser console, i see that the response to POST http://localhost/~denny/gradejob/laravel-filemanager/upload is the laravel "Page Expired" page.

Is it because of the _token is empty ?

Below are some screen shots of my console

The Headers

screen shot 2018-03-04 at 00 41 50

The Params

screen shot 2018-03-04 at 00 42 56

And the Response

screen shot 2018-03-04 at 00 43 28

The code in my View is

<script src="{{ asset('vendors/ckeditor/ckeditor.js')}}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.11/adapters/jquery.js"></script>
<script>
    var options = {
        filebrowserImageBrowseUrl: '{{ asset("/laravel-filemanager?type=Images") }}',
        filebrowserImageUploadUrl: '{{ asset("/laravel-filemanager/upload?type=Images&_token=") }}',
        filebrowserBrowseUrl: '{{ asset("/laravel-filemanager?type=Files") }}',
        filebrowserUploadUrl: '{{ asset("/laravel-filemanager/upload?type=Files&_token=") }}',
        allowedContent: true
    };
</script>
<script>
    CKEDITOR.dtd.$removeEmpty['span'] = false;
    $('textarea[name="email_template"]').ckeditor(options);
</script>

My middleware in lfm.php config is 'middlewares' => ['web', 'guest'], I tried 'web','auth:admin'
'web','auth'
before, but i get the same issue

Thanks

yang5664 commented 6 years ago

YES, you have to remember pass CRSF_TOKEN to backend.

dennysutanto commented 6 years ago

how should i do that @yang5664 ?

i copy this part from the documentation,

<script>
    var options = {
        filebrowserImageBrowseUrl: '{{ asset("/laravel-filemanager?type=Images") }}',
        filebrowserImageUploadUrl: '{{ asset("/laravel-filemanager/upload?type=Images&_token=") }}',
        filebrowserBrowseUrl: '{{ asset("/laravel-filemanager?type=Files") }}',
        filebrowserUploadUrl: '{{ asset("/laravel-filemanager/upload?type=Files&_token=") }}',
        allowedContent: true
    };
</script>

and it is working on my other project, but not in this new project, the only difference between these 2 projects is this new one has a custom guard for admin

Thanks

yang5664 commented 6 years ago

image

  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': "{{ csrf_token() }}"
      }
  });

if didn't work, try to comment file of "VerifyCsrfToken.php" then try again.

dennysutanto commented 6 years ago

I don't remember i set the ajaxSetup for my other project. But i will try it, and will update the result soon

Thanks

zsoltjanes commented 6 years ago

I had the same problem. Go to your VerifyCsrfToken.php (app/Http/Middleware/VerifyCsrfToken.php) file and take a look here. I had a the following code which is not used so I remove that:

 protected function tokensMatch($request){
        // If request is an ajax request, then check to see if token matches token provider in
        // the header. This way, we can use CSRF protection in ajax requests also.
        $token = $request->ajax() ? $request->header('X-CSRF-Token') : $request->input('_token');
        return $request->session()->token() == $token;
}
mostafamohs3n commented 5 years ago

I just came across this and this is how I fixed it:

var CSRFToken = $('meta[name="csrf-token"]').attr('content');
    var CKEditorOptions = {
      filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
      filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token='+CSRFToken,
      filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
      filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='+CSRFToken
    };

Note that I sent the token within the URL.

pishguy commented 3 years ago

this solution work fine:


Route::post('/attachImage', [AdminPanelController::class, 'attachImage'])
    ->name('attachImage');

protected $except = [
        '*/attachImage'
    ];
ysfckr commented 1 year ago

This solution worked perfectly for me.

var options = {
         filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
         filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
         filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
         filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
     };
andreans24 commented 6 months ago

I experienced the same thing but the code I used was like this

what should I do?

![Uploading Screen Shot 2024-04-03 at 11.18.55 AM.png…]()