Q:

Dropzone JS not a function error in partial view

I am using jquery-modal by kyle fox and am encountering this issue. When I open up the modal window, my partial view is loaded into the modal. However, I get this error in the console:

Dropzone.options.dropzone is not a function

If i change Dropzone.options.dropzone into $(#dropzone).dropzone, the code works. However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
I already loaded dropzone js and css in the header but I can't seem to get this to work.
@model AppOne.Data.ViewModels.AnnouncementAttachmentDetailsViewModel
<script>
    Dropzone.options.dropzone({
        url: "@Url.Action("Save", "AnnouncementAttachments", new { area = "Messages" })",
        autoProcessQueue: false,
        addRemoveLinks: true,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
                console.log("active");
                var submitButton = document.querySelector("#submit");
                var token = $('input[name="__RequestVerificationToken"]').val();
                var wrapperThis = this;
                submitButton.addEventListener("click", function (e) {
                    console.log("submitted");
                    wrapperThis.processQueue();
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    return false;
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("__RequestVerificationToken", token);
                    formData.append("@Html.IdFor(x=>x.AttachmentId)",$("#@Html.IdFor(x => x.AttachmentId)").val())
                });;

                this.on('errormultiple', function (file, message) {
                    //toastr.error(message);
                    wrapperThis.disable();
                });

                this.on('successmultiple', function (file,message) {
                    $.each(message, function (key, value) {
                        //toastr.success(value);
                    });
                    $(".dz-remove").hide();
                    wrapperThis.disable();
                });
            }
    });
</script>
<div class="row row-extend">
    <div class="col-sm-12">
        <h2>Upload</h2>
    </div>
    <div class="col-sm-12">
        <hr />
    </div>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { @action = "/", enctype = "multipart/form-data", id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.HiddenFor(x => x.AttachmentId)
                    <div id="dropzone" name="Files" class="dropzone form-group"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <button type="submit" id="submit" class="btn btn-primary">Upload</button>
                            @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

EDIT:
My layout.cshtml:
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AppOne</title>

    <link rel="stylesheet" href="~/twitter-bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/theme/theme-extended.css" />
    <link rel="stylesheet" href="~/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="~/jqueryui/jquery-ui.css" />
    <link rel="stylesheet" href="~/toastr.js/toastr.css" />
    <link rel="stylesheet" href="~/jquery-modal/jquery.modal.css" />
    <link rel="stylesheet" href="~/select2/css/select2.min.css" />
    <link rel="stylesheet" href="~/css/Modal.css" />
    <link rel="stylesheet" href="~/css/Site.css" />

    <link rel="stylesheet" href="~/datatables/css/jquery.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/select.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/fixedHeader.dataTables.css" />
    <link rel="stylesheet" href="~/datatables/css/responsive.bootstrap.css" />
    <link rel="stylesheet" href="~/css/DataTablesExtended.css" />
    <link rel="stylesheet" href="~/bootstrap-datetimepicker/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="~/dropzone/dropzone.css" />

    <script src="~/jquery/jquery.min.js"></script>
    <script src="~/jquery-validate/jquery.validate.js"></script>
    <script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/jqueryui/jquery-ui.js"></script>
    <script src="~/twitter-bootstrap/js/bootstrap.js"></script>
    <script src="~/moment.js/moment.min.js"></script>
    <script src="~/select2/js/select2.min.js"></script>
    <script src="~/toastr.js/toastr.min.js"></script>
    <script src="~/jquery-modal/jquery.modal.min.js"></script>
    <script src="~/datatables/js/jquery.dataTables.js"></script>
    <script src="~/datatables/js/dataTables.select.js"></script>
    <script src="~/datatables/js/dataTables.fixedHeader.js"></script>
    <script src="~/datatables/js/dataTables.responsive.js"></script>
    <script src="~/datatables/js/responsive.bootstrap.js"></script>
    <script src="~/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="~/dropzone/dropzone.js"></script>
    @RenderSection("scripts", false)
    @RenderSection("styles", false)
</head>

A:

However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.

It seems that your Upload button is in the form , and the url of form conflicts with the url of Dropzone.js (the url has to be specified on elements other than form (or when the form doesn't have an action attribute).).Try to make the modification like the working example below :
Html.BeginForm , remove the action
@using (Html.BeginForm( FormMethod.Post, new { enctype = "multipart/form-data",  id = "modal" }))
{ 
  // the stuff you want
}

Dropzone.js , NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the paramName. After looking at the request from a html5 multiple file upload I noticed the request does not add the indexes to the filename (files[n]). Dropzone.js does this so there is a work around. If you add the paramName option to Dropzone JS config and have it call a method which returns files you will get the same behaviour as the html5 multiple file upload. You could also refer to this link for more details on Configuration options of Dropzone.js
@section Scripts
{
<script>
     function myParamName() {
          return "Files";
     }

    $("#dropzone").dropzone({
        url: "@Url.Action("Save", "Home")",
        autoProcessQueue: false,
        paramName: myParamName,
        addRemoveLinks: true,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
            console.log("active");
            var submitButton = document.querySelector("#submit");
            var token = $('input[name="__RequestVerificationToken"]').val();
            var wrapperThis = this;
            submitButton.addEventListener("click", function (e) {
                console.log("submitted");
                wrapperThis.processQueue();
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                return false;
            });

            this.on('sendingmultiple', function (data, xhr, formData) {
                formData.append("__RequestVerificationToken", token);
                formData.append("@Html.IdFor(x=>x.AttachmentId)",$("#@Html.IdFor(x => x.AttachmentId)").val());
            });;

        }
    });
</script>
}

Controller
public IActionResult Save(List<IFormFile> Files,int AttachmentId)
{ 
//....
}

