I am using Dropzone.js in my Asp.Net Core2 application for my file-upload and storage routine. This works fine, except when I want to use the configuration options. Whatever I am doing, the browser does not recognize the code. This seems to stupid to be true, but I still dare putting the question out to you. I have put the code in the Head section, in the Form, at the bottom, but nothing works. Any ideas? This is the code for my AddFile.cshtml
. To prevent programming errors, I copied the code for the configuration options from the developers' github page.
<!-- Link to stylesheet for Dropzone -->
<link rel="stylesheet" href="~/css/dropzone.css" />
@model MyApp.Models.FilePath
@{
ViewData["Title"] = "Add a document";
}
<div class="row">
<section class="col-md-12">
<div>
<form id="doc-dropper" name="doc-dropper" class="dropzone" action="/AddFile" method="post" enctype="multipart/form-data">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<div class="form-group">
<label asp-for="CaseID" class="control-label">(Pas aan indien nodig)</label>
<select asp-for="CaseID" class="form-control" asp-items="ViewBag.CaseID"><option selected="selected" value="">---</option></select>
</div>
</form>
<script>
Dropzone.options.docDropper = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
dictDefaultMessage = 'standaard boodschap',
acceptedFiles = 'images/*'
};
</script>
</div>
</section>
</div>
<div><a href='javascript:history.go(-1)'>Go Back to Previous Page</a></div>
<script src="~/lib/dropzone/dropzone.js"></script>
Below I have added the source as it was compiled by Google Chrome:
<div>
<form id="doc-dropper" name="doc-dropper" class="dropzone dz-clickable" action="/AddFile" method="post" enctype="multipart/form-data">
<div class="form-group bmd-form-group is-filled">
<label class="control-label bmd-label-static" for="CaseID">(Pas aan indien nodig)</label>
<select class="form-control" id="CaseID" name="CaseID"><option selected="selected" value="">---</option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option selected="selected" value="4">MySelectedAnswer</option>
<option value="5"></option>
</select>
</div>
<div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>
<script>
Dropzone.options.docDropper = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
dictDefaultMessage = 'standaard boodschap',
acceptedFiles = 'images/*'
};
</script>
</div>