javascripthtmldropzone.jsdropzone

Multiple dropzone on single page, second form does not shows upload text


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>

Solution

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