Click here to Skip to main content
15,559,455 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using Laravel 7 for my project. Although I am using VueJS within Laravel. When I try to upload an image, I get the error (419 | page expired) immediately after submitting the form!. But in the console window, I can confirm that the token is there.

This is my blade file:
  <meta name="csrf-token" content="{{ csrf_token() }}">
      window.Laravel = {
        csrfToken: '{{ csrf_token() }}'
  <div id="vueapp">
<script src="{{ mix('/js/app.js') }}"></script>

This is my .vue file:
    <div class="form-group">
      <label for="exampleInputFile">img</label>
      <form class="input-group" action="/app/upload" method="post" :headers="{'x-csrf-token': token}">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="exampleInputFile">
          <label class="custom-file-label" for="exampleInputFile">choose file</label>
        <div class="input-group-append">
          <button class="input-group-text" action="app/upload">uplaod</button>
export default{
    token: ''
  methods: {
  async created(){
    const res = await this.callApi('get','app/get_categories')
    this.token = window.Laravel.csrfToken
    this.categories =

I also tried to included some parameters :
name="_token" v-bind:value="csrf"
name="_token" :value="token"

What I have tried:

clear cache using:
php artisan view:clear 
php artisan route:clear 
php artisan cache:clear
php artisan config:cache

and to change my .env variable APP_NAME to unique name
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

my controller :
public function upload(Request $request){
        $imageName = time().'.'.$request->file->extension();
        return $imageName;
Updated 24-Feb-22 10:12am

1 solution

I think your code with the token is fine, hence the console confirmation...

What size images are you trying to upload? PHP and/or your server has limitations, check these to confirm they do not overflow the size allowed.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900