javascript - ¿Cómo puedo solucionar este error "Dropzone ya adjunto"?

jquery html

Question

Tengo esta muestra:

link

Logré crear este formulario, pero desafortunadamente no funciona porque me sale un error.

Dropzone already attached.

CÓDIGO HTML:

<div class="dropzone dz-clickable" id="myDrop">
                                 <div class="dz-default dz-message" data-dz-message="">
                                      <span>Drop files here to upload</span>
                                 </div>
</div>

CÓDIGO JS:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Configuré Dropzone.autoDiscover = false; Pero lamentablemente todavía no funciona.

¿Puedes decirme qué está causando este problema?

Answer 1

Debes usar cualquiera

var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

o

$("div#myDrop").dropzone({ url: "/file/post" });

no ambos. Básicamente lo que estás haciendo es llamar a la misma cosa dos veces.

Answer 2

Definir el código a continuación globalmente ayudará a:

Dropzone.autoDiscover = false;

Answer 3

Después de buscar e intentar varias soluciones en la red, aquí obtuve una de las mejores soluciones para resolver este problema.

HTML

<div id="some-dropzone" class="dropzone"></div>

JavaScript

Dropzone.options.someDropzone = {
  url: "/file/post"
};

Answer 4

Esta es mi solución hackish. Básicamente, comprueba si Dropzone está cargado como DOM, y si no lo ha hecho, creará uno.

    function dropzoneExists(selector) {
        var elements = $(selector).find(''.dz-default'');
        return elements.length > 0;
    }

    var exists = dropzoneExists(''div#photo_dropzone'');
    if(exists) return;

    $(''div#photo_dropzone'').dropzone({
       ...
       ...
    });

ACTUALIZACIÓN : Se sugiere averiguar por qué la zona de caída se inicia dos veces. Solucionarlo es la forma correcta, y esta respuesta es solo una solución técnica de deuda .

Answer 5

Este error también puede ocurrir cuando un elemento ya ha tenido un dropzone clase.

Sin embargo, si se elimina, por alguna razón, el estilo predeterminado no se aplicará después de que se inicie Dropzone. Mi única solución es crear un estilo personalizado para ese elemento.

Answer 6

Puede concat su ID "myDrop" con algún valor único para cada instancia de Dropzone.

Ejemplo:

 html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>

 in func: 
 this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);

Answer 7

Solucioné este problema editando el dropzone.js. solo ve a dropzone.js y reemplaza

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

con

if (this.element.dropzone) {
    return this.element.dropzone;
 }

Esta solución fue encontrada originalmente por Haskaalo , publicada en los problemas de github.

Answer 8

a veces es porque tienes dos elementos html con el mismo id dropzone .

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

Answer 9

<script>
  Dropzone.autoDiscover = false;
  $(document).ready(function() {
    var myDrop= new Dropzone("#myDrop", {
      url: ''/admin/media''
    });
  });
</script>

en lugar de

<script>
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    var myDrop= new Dropzone("#myDrop", {
      url: ''/admin/media''
    });
  });
</script>