web-dev-qa-db-fra.com

Comment puis-je réparer cette erreur "Dropzone déja attaché"?

J'ai cet échantillon:

lien

J'ai réussi à créer ce formulaire mais malheureusement cela ne fonctionne pas car je reçois une erreur.

Dropzone already attached.

CODE 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>

CODE 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" });

J'ai mis en place Dropzone.autoDiscover = false; mais malheureusement ne fonctionne toujours pas.

Pouvez-vous s'il vous plaît me dire ce qui cause ce problème?

javascriptjqueryhtmldropzone.js
28
Marius

Vous devriez utiliser soit 

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

ou

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

pas les deux. En gros, vous appelez deux fois la même chose.

11
drys

Définir le code ci-dessous globalement aidera: 

Dropzone.autoDiscover = false;
111
Syed

Cette erreur peut également se produire lorsqu'un élément a déjà eu une classe dropzone.

Cependant, si cette option est supprimée, le style par défaut ne s'appliquera plus après le lancement de Dropzone. Ma seule solution consiste à créer un style personnalisé pour cet élément. 

5
inmyth

Après avoir cherché et essayé plusieurs solutions sur le net, voici une des meilleures solutions pour résoudre ce problème.

HTML

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

JavaScript

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

J'ai résolu ce problème en modifiant le fichier dropzone.js. il suffit d'aller sur dropzone.js et de remplacer

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

avec

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

cette solution a été trouvée par Haskaalo , publiée sur le numéros de github

3
Jacky Supit

Ceci est ma solution de contournement hackish. En gros, il vérifie si dropzone est chargé en tant que DOM et, dans le cas contraire, il en créera un.

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

UPDATE: Il est suggéré de comprendre pourquoi la zone de transfert est lancée deux fois. Corriger cela est la bonne solution, et cette réponse n’est qu’une solution de contournement techniquement-endettable.

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

au lieu de

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

Vous pouvez concattre votre identifiant "myDrop" avec une valeur unique pour chaque instance de Dropzone.

Exemple:

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

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

parfois, c’est parce que vous avez deux éléments html avec le même identifiant dropzone.

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

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