2

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>
Charles de M.
  • 633
  • 7
  • 20

0 Answers0