Click here to Skip to main content
15,559,455 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900