Comment puis-je corriger cette erreur "Dropzone déjà attachée"?
J'ai cet échantillon:
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 {[3] } mais malheureusement ne fonctionne toujours pas.
Pouvez-vous me dire ce qui cause ce problème?
9 réponses
Vous devez utiliser soit
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});
Ou
$("div#myDrop").dropzone({ url: "/file/post" });
Pas les deux. Fondamentalement, ce que vous faites appelle la même chose deux fois.
Définir globalement le code ci-dessous aidera:
Dropzone.autoDiscover = false;
Cette erreur peut également se produire lorsqu'un élément a déjà eu une classe dropzone.
Cependant, si cela est supprimé, le style par défaut ne s'appliquera pas après le lancement de Dropzone. Ma seule solution est de créer un style personnalisé pour cet élément.
Après avoir cherché et essayé plusieurs solutions sur le net, voici l'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"
};
C'est ma solution de contournement hackish. Il vérifie fondamentalement si dropzone est chargé en tant que DOM, et si ce N'est pas le cas, 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 le dropzone est lancé deux fois. Corriger c'est la bonne façon, et cette réponse n'est qu'une solution de contournement techniquement débile.
J'ai corrigé ce problème en éditant la dropzone.js. il suffit d'aller à dropzone.js et remplacer
if (this.element.dropzone) {
throw new Error("Dropzone already attached.");
}
Avec
if (this.element.dropzone) {
return this.element.dropzone;
}
Cette solution est à l'origine trouvé par Haskaalo, posté sur le github questions
Parfois, c'est parce que vous avez deux éléments html avec le même id dropzone.
<div id="dropzone" class="dropzone"></div>
<div id="dropzone" class="dropzone"></div>
Vous pouvez concatter votre id "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);
<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>