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?

Solution 1

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!

Solution 2

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

Solution 3

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

Comments

[CodeOrElse]

Yes. this is satisfactory!