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?

score 12 · Answer 1 · answered Jun 01 '17 at 06:48

Good luck with

@{
}

<div id="dropzone">
    <form action="/Photo/Upload" class="dropzone" id="uploader" enctype="multipart/form-data"></form>
</div>

@section Styles{
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/basic.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/dropzone.css" />

}
@section Scripts{
    <script src="~/lib/dropzone/dist/dropzone.js"></script>

    <script>
        Dropzone.autoDiscover = false;
        window.onload = function () {

            var dropzoneOptions = {
                dictDefaultMessage: 'Drop Here!',
                paramName: "file",
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                init: function () {
                    this.on("success", function (file) {
                        console.log("success > " + file.name);
                    });
                }
            };
            var uploader = document.querySelector('#uploader');
            var newDropzone = new Dropzone(uploader, dropzoneOptions);

            console.log("Loaded");
        };
    </script>
}

Yes. this is satisfactory! – CodeOrElse Apr 28 '21 at 18:46 — CodeOrElse, Apr 28 '21 at 18:46

score 7 · Answer 2 · answered Jun 28 '18 at 14:20

Four options:

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
Use Dropzone.autoDiscover = false;
Access the options after load by setting Dropzone.options.${formname} where formname is the camelCased ID of the form.
Access the options after load via the dropzone property attached to the element.
document.querySelector(formname).dropzone.options
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 } }

score 3 · Accepted Answer · answered Apr 27 '15 at 20:04

I figured it out myself. I'm fairly new to ASP.NET Web Forms and forgot that Javascript is client-side and therefore references element IDs which are different on the client-side than server-side. I viewed the source and found that the form's ID is "aspnetForm", so I changed my options code to:

Dropzone.options.aspnetForm = {
            uploadMultiple: false,
            maxFiles: 1,
            maxFilesize: 5000,

etc.

Now it works!

How do you enable Dropzone options? autoDiscover breaks Dropzone functionality

3 Answers3