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 Dropzone.autoDiscover = false;
mais malheureusement ne fonctionne toujours pas.
Pouvez-vous s'il vous plaît me dire ce qui cause ce problème?
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.
Définir le code ci-dessous globalement aidera:
Dropzone.autoDiscover = false;
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.
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"
};
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
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.
<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>
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);
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>