How do you enable Dropzone options? autoDiscover breaks Dropzone functionality.

Question

So, I tried following the solution here:

Dropzone image upload options not working :(

but, whenever I provide the option:

        Dropzone.autoDiscover = false;

the dropzone goes from displaying the default drag'n'drop look to just text with a "Browse" button.

Here is my code (dropzone is included in header):

<script type="text/javascript">
        $(document).ready(function () {

            Dropzone.autoDiscover = false;
            $("#uploadme").dropzone({
                maxFilesize: 5000,
                dictDefaultMessage: "Drop your file here to upload (multiple files require being zipped)",
                uploadMultiple: false,
                addRemoveLinks: true
            });

        });
    </script>

    <h5>Test space for FTP</h5>
    <asp:Label ID="lblError" runat="server"></asp:Label>

    <div class="mainContent">
        <form runat="server" method="post" enctype="multipart/form-data"
            class="dropzone"
            id="ftpUpload">
            <div class="fallback" id="uploadme">
                <input type="file" name="file" multiple />
                <input type="submit" value="Upload" />
            </div>
        </form>
    </div>

So, the question is, how do I specify options for dropzone without ruining the default look?

Answer 1

Four options:

1. Don't use class .dropzone in your form, so that autodiscover doesn't pick it up. That will mess you up, if you wish to use the default CSS
2. Use Dropzone.autoDiscover = false;
3. Access the options after load by setting Dropzone.options.${formname} where formname is the camelCased ID of the form.
4. Access the options after load via the dropzone property attached to the element.
   document.querySelector(formname).dropzone.options
5. You can access it via index at: Dropzone.instances[0].options

If you use the latter steps (as is recommended by their site), you can also set options such as the URL on the element, and merge the options via:

let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }