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