CODEWITHSUNDEEP
javascripthtmldropzone.jsdropzone
Laci K
Laci K

Reputation: 595

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>

Upvotes: 0

Views: 198

Answers (1)

async await
async await

Reputation: 2395

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>

Upvotes: 1

Related Questions