CODEWITHSUNDEEP
ajaxlaravelvue.js
mySun
mySun

Reputation: 1706

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

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?

Upvotes: 4

Views: 601

Answers (3)

Cameron
Cameron

Reputation: 554

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

Upvotes: 0

John Lobo
John Lobo

Reputation: 15319

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>

Upvotes: 2

amir ali
amir ali

Reputation: 111

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

Upvotes: 2

Related Questions