Remove From My Forums

JS not executing on Dropzone

Question

User-2104573357 posted

Hi,

I have a functional Dropzone that Uploads files to my server. Now I am trying to set the Dropzone Options, but my script is not changing anything e.g. I can Upload more than 5 files and all file types... Thank you for any help!

Here is my Html:

<link rel="stylesheet" type="text/css" href="~/dropzone/dist/basic.css">
<link rel="stylesheet" href="~/dropzone/dist/dropzone.css">

<script src="~/dropzone/dist/dropzone.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>


@section Scripts{
    <script type="text/javascript">
        $(function () {
            $('#upload-widget').filedrop({
                url: '@Url.Action("UploadFiles", "FileUpload")',
                allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'],
                allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],
                paramname: 'files',
                maxfiles: 5,
                maxfilesize: 5, // in MB
                dragOver: function () {
                    $('#dropArea').addClass('active-drop');
                },
                dragLeave: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                drop: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                afterAll: function (e) {
                    $('#dropArea').html('file(s) uploaded successfully');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadList').append('<li class="list-group-item">'+file.name+'</li>')
                }
            })
        })
    </script>
}

    <form id="upload-widget" method="post" action="@Url.Action("UploadFiles", "FileUpload")" class="dropzone dz-clickable">
        <div class="dz-message">
            <p style="color:white;">Drop photos or click to upload.</p>
        </div>
    </form>

Sunday, April 19, 2020 3:45 PM

Answers

User-719153870 posted

Hi emilector,

This DropZone plugin seems has little bug conflicts with some of the JQuery version.

To solve your issue, to make the configuration options workable, please update your code like below:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DropZoneDemo</title>
    <link href="~/Scripts/dropzone-5.7.0/dist/basic.css" rel="stylesheet" />
    <link href="~/Scripts/dropzone-5.7.0/dist/dropzone.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="~/Scripts/dropzone-5.7.0/dist/dropzone.js"></script>
    <script src="~/Scripts/jquery-latest.pack.js"></script>
    <script type="text/javascript">
            Dropzone.autoDiscover = false;
        $(function () {
            var myDropzone = new Dropzone("#upload-widget", {url: '@Url.Action("UploadFiles", "Demo")',
                clickable: false,acceptedFiles: 'image/*'/*,other options here*/})
        })
    </script>
</head>
<body>
    <div>
        <form id="upload-widget" method="post" action="@Url.Action("UploadFiles", "Demo")" class="dropzone dz-clickable">
            <div class="dz-message">
                <p style="color:black;">Drop photos or click to upload.</p>
            </div>
        </form>
    </div>
</body>
</html>

In addtion, some of the options in your code like allowedfiletypes and allowedfileextensions can not be found at the official doc Configuration options, please make sure you use the supported options.

Best Regard,

Yang Shen

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, April 20, 2020 2:50 AM

All replies

0

Sign in to vote

User-474980206 posted

JavaScript mapped objects are case sensitive. If you spell the options incorrectly they are not honored.

Sunday, April 19, 2020 4:35 PM