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>
}

from Dropzone JS not a function error in partial view