0

Hola tengo una duda de como poder pasarle el Token a mi Dropzone.

normalmente lo hacía así desde una vista de laravel. Agregando Js. en ella misma. Y no había problema.

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()}}'
			}
		});		

pero ahora, Estoy con Vue. ese fue el que descargue.

npm install vue2-dropzone

pero lo que pasa es que donde estoy intentando cargar una imagen, Es que estoy desde un componente Vue.

Y no sé como pasarle ese token al componente. ... Estoy haciendo un SPA

1 respuesta 1

1

Nunca he usado vue2-dropzone pero según la documentación, la propiedad (prop) options acepta lo mismo que las opciones de dropzone.

Ya que tienes opciones dinámicas (la url y el token del header), tienes que hacerlo usando 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
       };
    }
  }
}

Y en la plantilla:

<vue-dropzone ref="myDropzone" :id="id" :options="dropzoneOpts"></vue-dropzone>
2
  • me diste una idea de como pasarle el token: Lo puse así: 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') Commented el 18 nov. 2018 a las 1:41
  • 1
    Hay un proverbio chino que dice: "Si no está roto, no lo arregles". Esa solución crea un acoplamiento innecesario entre el componente y su plantilla, pero probablemente sea irrelevante para este caso de uso. Tal vez sería menos arriesgado usar $(this.el).find(('meta[name="csrf-token"]').attr('content') para no arriesgarte a que otra instancia de dropzone ensucie a la primera.
    – ffflabs
    Commented el 19 nov. 2018 a las 11:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.