How to install vue-laravel-image-crop-upload in laravel? - ajax

Question

I need use vue-laravel-image-crop-upload in Laravel 8.
First step:
Add js script file in my project:
https://dai-siki.github.io/vue-image-crop-upload/example/demo-src.js
Then use this code in html:
<div id="app">
<div class="item">
<img v-if="avatarUrl2" v-show="true" class="avatar" :src="avatarUrl2" style="" />
<my-upload
key="0"
url="/club/uploadCover"
field="avatar2"
lang-type="ar"
:value.sync="show2"
:params="otherParams"
></my-upload>
</div>
<button class="release__buy btn-cover" #click="toggleShow2">Select</button>
</div>
After click select button and select image, Show 419 unknown status.
How to set CSRF token in ajax?

Answer 1

One way is to pass param
#php
$data=['_token'=>csrf_token()];
#endphp
and in vuejs component
<my-upload url="{{route("test")}}" img-format="jpg" img-bgc="#fff"
:lang-ext="{hint: '点击，或拖动图片至此处(*^_^*)'}"
v-model="show1"
field="avatar1"
ki="0"
#crop-success="cropSuccess"
#crop-upload-success="cropUploadSuccess"
#crop-upload-fail="cropUploadFail"
:no-rotate="false"
:params="{{json_encode($data)}}"></my-upload>
Also use core package
Ref:https://github.com/dai-siki/vue-image-crop-upload
You are using fork package(https://github.com/ibohonos/vue-laravel-image-crop-upload) which is not updated one
Also you can route url too like url="{{route("test")}}"
Scripts i used from original package
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/vue.js"></script>
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/demo-src.js"></script>
If you want to pass using headers then
#php
$data=['X-CSRF-TOKEN'=>csrf_token()];
#endphp
then in component
<div class="item">
<a class="btn" #click="toggleShow2">Set Avatar</a>
<img class="avatar" v-if="avatarUrl2" :src="avatarUrl2" v-show="true" style="display: none;">
<my-upload url="{{route("test")}}"
#crop-success="cropSuccess"
#crop-upload-success="cropUploadSuccess"
#crop-upload-fail="cropUploadFail"
:no-square="true"
field="avatar2"
ki="0"
lang-type="en"
v-model="show2"
:headers="{{json_encode($data)}}"
></my-upload>
</div>

Answer 2

You have to use node package manager or npm to install module
use this command npm install vue-image-crop-upload
Visit Docs

Answer 3

Try
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
as referenced here https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token