dimanche 12 septembre 2021

upload an file with laravel and VueJS causes error

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:

<html>
<head>
  <meta name="csrf-token" content="">
  <title>app</title>
  <script>
    (function(){
      window.Laravel = {
        csrfToken: ''
      };
    })();
  </script>   
</head>
<body>
  <div id="vueapp">
    <admin></admin>
  </div>
<script src=""></script>
</script>
</body>
</html>

This is my .vue file:

<template>
  <div>
    <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>
        <div class="input-group-append">
          <button class="input-group-text" action="app/upload">uplaod</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return{
    token: ''
    }
  },
  methods: {
  },
  async created(){
    const res = await this.callApi('get','app/get_categories')
    this.token = window.Laravel.csrfToken
    this.categories = res.data
  }
}
</script>

I also tried to included some parameters :

name="_token" v-bind:value="csrf"
name="_token" :value="token"

and to 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){
        $image = time().'.'.$request->file->extension();
        $request->file->move(public_path('uploads'),$image);
        return $image;
    }


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire