Skip to content
Advertisement

How do you enable Dropzone options? autoDiscover breaks Dropzone functionality

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?

Advertisement

Answer

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!

Advertisement