How to enable Dropzone options? autoDiscover disrupts Dropzone functionality.

So, I tried using the solution here:

Dropzone image upload options do not work :(

but when I provide this option:

        Dropzone.autoDiscover = false;

dropzone transitions from the default drag'n'drop display for plain text using the browse button.

Here is my code (dropzone is included in the 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?

+4
source share
2 answers

. ASP.NET Web Forms , Javascript , , . , "aspnetForm", :

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

.

!

+2

@{
}

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

Source: https://habr.com/ru/post/1584919/


All Articles