Answered by:
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
andallowedfileextensions
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
andallowedfileextensions
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