I'm trying to put two dropzone forms on a single page and all of the functions like upload, show, delete works as it should be, but the second form does not shows the "drop files here" text.
I want to have different texts for each form like "drop images here" and "drop documents here". How can I achieve this?
My code looks like this:
html:
<div class="first">
<div class="inner">
<form class="dropzone" id="mydropzone" action="up.php"></form>
</div>
</div>
<div class="second">
<div class="inner">
<form class="dropzone2" id="mydropzone2" action="up2.php"></form>
</div>
</div>
<script>
Dropzone.autoDiscover = false;
Dropzone.options.mydropzone = {
dictDefaultMessage: "my custom text one!"
};
$(".dropzone").dropzone({
//dropzone stuff here like show already uploaded files, delete, etc...
});
Dropzone.options.mydropzone2 = {
dictDefaultMessage: "my custom text two!"
};
$(".dropzone2").dropzone({
//dropzone stuff here like show already uploaded files, delete, etc...
});
</script>
You use the class dropzone2 for your second dropzone, so dropzone.js can not recognize it as a dropzone. Also, it seems changing the dropzone options after you call the first dropzone is preventing option changes.
Try this out, hopefully it helps
<div class="first">
<div class="inner">
<form class="dropzone" id="mydropzone" action="up.php"></form>
</div>
</div>
<div class="second">
<div class="inner">
<form class="dropzone" id="mydropzone2" action="up2.php"></form>
</div>
</div>
<script>
Dropzone.autoDiscover = false;
Dropzone.options.mydropzone = {
dictDefaultMessage: "my custom text one!"
};
Dropzone.options.mydropzone2 = {
dictDefaultMessage: "my custom text two!"
};
$("#mydropzone").dropzone({
//dropzone stuff here like show already uploaded files, delete, etc...
});
$("#mydropzone2").dropzone({
//dropzone stuff here like show already uploaded files, delete, etc...
});
</script>