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

from Newest questions tagged laravel-5 – Stack Overflow https://ift.tt/3k4fQd6
via IFTTT

Related Posts

Codeigniter : Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE) in Laravel project

I’m getting following error: **Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE)** Note : It’s working in local but facing issue in production server. private…

Firebase receive notification while tab is active or on focus

What i want is to be able to perform an action when a user receives a notification while the browser is open and tab is active or…

Laravel’s alias loader does not find class

We have a legacy project that we cannot update and we need to make some changes in symfony’s Response.php in vendor. We have solved this by copying…

Laravel 5 – generic document management

I have a system where you can create different types of unique documents. For instance, one document is called Project Identified and this expects certain inputs. Originally,…

Laravel Nova limit the results in indexQuery

I ran intro a situation where I need to limit the results of a resource to only 3 results. To be more specific, based on the logged…

Auditoria en laravel 5.8 [closed]

Cómo puedo automatizar el registro de actividades de un usuario en laravel? Si un usuario ingresa a un app de laravel, debo guardar toda su actividas, a…

Leave a Reply

Your email address will not be published.