Custom dropzone JS not passing files to controller

See more:

C#

Javascript

jQuery

I have the following theme which has their own dropzone js

(https://htmlstream.com/front-dashboard/documentation/dropzone.html)

. The documentation states that I should use the following html string to customize the dropzone area as a result this shows progress bar, file size and file name.

The class is called js-dropzone and is not required to be on a form element but rather they are using this on a div. I am trying to pass my files to the controller which accept IFormFileCollection but its count is coming back as 0. The function below is what is in script

What I have tried:

<pre>;(function ($) {
'use strict';

$.HSCore.components.HSDropzone = {
    defaults: {
        // Default variables
        url: "index.html",
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        previewTemplate: $('<div>' +
            '  <div class="col h-100 px-1 mb-2">' +
            '    <div class="dz-preview dz-file-preview">' +
            '      <div class="d-flex justify-content-end dz-close-icon">' +
            '        <small class="tio-clear" data-dz-remove></small>' +
            '      </div>' +
            '      <div class="dz-details media">' +
            '        <div class="dz-img">' +
            '         <img class="img-fluid dz-img-inner" data-dz-thumbnail>' +
            '        </div>' +
            '        <div class="media-body dz-file-wrapper">' +
            '         <h6 class="dz-filename">' +
            '          ' +
            '         </h6>' +
            '         <div class="dz-size" data-dz-size></div>' +
            '        </div>' +
            '      </div>' +
            '      <div class="dz-progress progress">' +
            '        <div class="dz-upload progress-bar bg-success" role="progressbar" style="width: 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
            '      </div>' +
            '      <div class="d-flex align-items-center">' +
            '        <div class="dz-success-mark">' +
            '          ' +
            '        </div>' +
            '        <div class="dz-error-mark">' +
            '          ' +
            '        </div>' +
            '        <div class="dz-error-message">' +
            '          <small data-dz-errormessage></small>' +
            '        </div>' +
            '      </div>' +
            '    </div>' +
            '  </div>' +
            '</div>').html()
    },

    init: function (el, options) {
        if (!el.length) return;

        var context = this,
            $el = $(el),
            defaults = Object.assign({}, context.defaults),
            dataSettings = $el.attr('data-hs-dropzone-options') ? JSON.parse($el.attr('data-hs-dropzone-options')) : {},
            settings = {
                init: function () {
                    var $this = this,
                        $message = $($this.element).find('.dz-message');

                    $this.on('addedfile', function (file) {
                        if (String(file.type).slice(0, 6) !== 'image/') {
                            $(file.previewElement).find('.dz-img').replaceWith('' + file.name.substring(0, 1).toUpperCase() + '');
                        }

                        $message.hide();
                    });

                    $this.on('removedfile', function () {
                        if ($this.files.length <= 0) {
                            $message.show();
                        }
                    });
                }
            };
        settings = $.extend(true, defaults, settings, dataSettings, options);

        /* Start : Init */

        var newDropzone = new Dropzone(el, settings);

        /* End : Init */

        return newDropzone;
    }

};})(jQuery);

My layout page contains the following code which initializes the dropzone control.

<script src="~/front-dashboard-v1.1/dist/assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script>
    $(document).on('ready', function () {
        // INITIALIZATION OF DROPZONE FILE ATTACH MODULE
        // =======================================================
        $('.js-dropzone').each(function () {
            var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
        });
    });
</script>

My form is as follows but unfortunately when I post to my controller I IFormFileCollections count as 0.

<form  method="post" enctype="multipart/form-data" asp-action="DocumentUpload"  asp-controller="Bookings">
        <div class="card">
            <div class="card-header">
                <p class="card-header-title">Vehicle Picture Upload Form</p>
            </div>
            <div class="card-body">
                <!-- Dropzone -->
                <div id="attachFilesLabel" class="js-dropzone dropzone-custom custom-file-boxed">
                    <div id="mydropzone" class="dz-message custom-file-boxed-label">
                        <img class="avatar avatar-xl avatar-4by3 mb-3" src="../assets/svg/illustrations/browse.svg" alt="Image Description">

                        <h5>Drag and drop your file here</h5>

                        <p class="mb-2">or</p>
                        Browse files
                    </div>
                    <!-- End Dropzone -->
                    <!-- End Dropzone -->
                    <br />

                </div>
            </div>
            <div class="card-footer">
                <button id="submit" type="submit" class="btn btn-primary">Save All Images</button>
            </div>
        </div>
    </form>