estoy tratando de hacer que cuando el usuario de click sobre un archivo que quiere eliminar pueda salir un confirm para que el usuario pueda decidir si eliminar o no

[deylyn]

como puedo lograr esto? es decir que si el usuario clickeo poder decirle, está seguro de eliminar el acrhivo? solo si el usuario dice que si, entonces proceder a eliminar del dropzone.

@vdropzone-removed-file="removedfile" yo estoy usando esto y me pasa que cuando hago click alli ya atomaticamente elimina el archivo de la zona

[darrenklein]

The OP is asking if it is possible to listen for a click on the "Remove File" button so that they can ask for user confirmation. The problem with using the dropzone-removed-file event listener in this case is that the file has already been removed, so asking for confirmation at that point doesn't help.

[darrenklein]

@deylyn Hola - yo hablo un poco de español, posiblemente yo puedo ayudarte -

Este es posible - necesitas usar los opciones addRemoveLinks y dictRemoveFileConfirmation de dropZone como este -

<template>
  <vue2Dropzone
    :options="dropzoneOptions"
    @vdropzone-file-added="$emit('input', $event)"
    @vdropzone-removed-file="$emit('input', null)"
  />
</template>

<script>
import vue2Dropzone from "vue2-dropzone";

import "vue2-dropzone/dist/vue2Dropzone.min.css";

export default {
  name: "FileInput",
  components: {
    Vue2Dropzone
  },
  created() {
    this.dropZoneOptions = {
      addRemoveLinks: true,
      dictRemoveFileConfirmation: "Quieres eliminar este foto?"
    }
  }
}
</script>

[deylyn]

hola, Darren gracias lo intentaré. Otra pregunta hay un evento click para cada elemento (imagen o pdf )que uno sube en el componente.

El sáb, 28 nov 2020 a las 22:13, Darren (notifications@github.com) escribió:

@deylyn https://github.com/deylyn Hola - yo hablo un poco de español, posiblemente yo puedo ayudarte -

Este es posible - necesitas usar los opciones addRemoveLinks y dictRemoveFileConfirmation de dropZone como este -

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rowanwins/vue-dropzone/issues/576#issuecomment-735318519, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF2OQ33CAMSLUV4CQFXGF6LSSGU3NANCNFSM4QT2MLTQ .

[darrenklein]

Quieres escuchar eventos de clic en cada de los archivos que se cargó?

[deylyn]

Exactamente, un click para cada archivo que agrego, porque voy a mostrar el pdf en grande de ese archivo que se clickea en determinado momento.

El lun, 14 dic 2020 a las 16:44, Darren (notifications@github.com) escribió:

Quieres escuchar eventos de clic en cada de los archivos que se cargó?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rowanwins/vue-dropzone/issues/576#issuecomment-744699571, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF2OQ36SJFN4HSM76G52YYDSUZ2MDANCNFSM4QT2MLTQ .

[darrenklein]

Creo qué sí - un momento, por favor.

[darrenklein]

@deylyn Probablamente es una manera mejor que esto (no tengo mucha experiencia con VueJS, entonces podría haber una manera más idiomático), pero esto funcionar. Cuándo se hace click en cada archivo, está un event puedes examinar. Cada event contene una referencia al elemento de HTML, que tiene información sobre el archivo. Tienes que incluir un oyente de los eventos click. Por ejemplo:

<template>
  <vue2Dropzone
    @vdropzone-file-added="handleFileAdded($event)"
  />
</template>

<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";

export default {
  name: "FileInput",
  data() {
    return {
      fileSource: null
    }
  },
  methods: {
    handleFileInput(data) {
      // Cuándo un archivo se cargó, se agrega un oyente de los eventos "click"
      data.previewElement.addEventListener("click", this.getFileSource);
    },

    getFileSource(event) { 
      // El evento de clic puede ocurrir en uno de los pocos elementos secundarios
      // Encontre el padre elemento de clase "dz-preview dz-image-preview"
      const dzPreviewElem = event.path.find((elem) => {
        return elem.className === "dz-preview dz-image-preview";
      });

      // El niño primero del niño primero es el elemento con la información
      const fileElem = dzPreviewElem.children[0].children[0];

      this.fileSource = fileElem.src;
    }
  }
}
</script>

Espero que esto te ayuda.

(Google Translate me ayudó un poco)

[darrenklein]

590