Pass the Header to Dropzone - laravel

Question

Pass the Header to Dropzone - laravel

Navigation

#1 by (1 votes)

0

Hi, I have a question about how to pass the Token to my Dropzone.

I usually did it from a laravel view. Adding Js. in herself. And there was no problem.

var myDropZone = new Dropzone('.dropzone',{

			url: '/admin/posts/{{$post->url}}/photos',
			paramName:'photo', 
			acceptedFiles:'image/*', 
			maxFilesSize: 2,
			maxFiles: 10,//
			dictDefaultMessage:'Arrastra las fotos aqui para subirlas',
			headers:{
				'X-CSRF-TOKEN':'{{ csrf_token()}}'
			}
		});

but now, I'm with Vue. that was the one that unloaded.

npm install vue2-dropzone

but what happens is that where I'm trying to load an image, I'm from a Vue component.

And I do not know how to pass that token to the component. ... I'm doing a SPA

laravel vue.js dropzone

asked by Alex Burke Cooper 25.09.2018 в 10:44

source

1 answer

Test functions you create in Haskell Show all combinations by multiplying all the numbers in a matrix

score 1 · Accepted Answer

I have never used vue2-dropzone but according to the documentation , the property (prop) options accepts the same as the dropzone options .

Since you have dynamic options (the url and the header token), you have to do it using computed properties :

import vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css'


export default {
  name: 'app',
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      id:'dropZone'
    }
  },
  computed: {

    postUrl() {
       // aquí obtienes lo que para ti era $post->url, 
       let thePostUrl = getPostUrl(); // nombre cualquiera para obtenerlo
       return thePostUrl;
    },
    url() {
       return '/admin/posts/${this.postUrl}/photos';
    },
    token() {
        // aquí obtienes el token csrfToken
        let csrfToken = getToken(); // la manera como obtenías el token
        return csrfToken:
    },
    headers() {
        return {'X-CSRF-TOKEN': this->token };
    },
    dropzoneOpts() {
       return {
          // se obtiene de la propiedad computed url
          url: this.url, 
          paramName:'photo', 
          acceptedFiles:'image/*', 
          maxFilesSize: 2,
          maxFiles: 10,
          dictDefaultMessage:'Arrastra las fotos aqui para subirlas',
          // se obtiene de la propiedad computed headers 
          headers: this.headers
       };
    }
  }
}

And in the template:

<vue-dropzone ref="myDropzone" :id="id" :options="dropzoneOpts"></vue-dropzone>