locked
JS not executing on Dropzone RRS feed

  • 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

  • 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
  • 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
  • User-2104573357 posted

    Thank you so much , works like a charm!

    Monday, April 20, 2020 7:12 AM