Friday, 5 October 2018

Multiple dropzone in one form

I'm using dropzone in one single page. In fact, user can add dynamically one object that contains DropZone for instance one City can have N houses and for each house, I let the user send files trough DropZone.

The problem is that I can't bind the uploaded files to the ASP model. At the moment it doesn't even reach the controller.

Here is the HTML it generates:

<div class="house0">
<div class="dropzone dz-clickable" id="houseDropzone0">
<div class="dz-default dz-message" data-dz-message="" style="display: block;">
                    <span>Drop files here to upload</span>
                </div>
            </div>
</div>

<div class="house1">
<div class="dropzone dz-clickable" id="houseDropzone1">
<div class="dz-default dz-message" data-dz-message="" style="display: block;">
                    <span>Drop files here to upload</span>
                </div>
            </div>
</div>

Here is the Javascript I've done:

//Foreach houses, create a dropzone element and stock it in the table
var dropzones = [];
var housesList= @Html.Raw(Json.Encode(Model.housesList));
for (var i = 0; i < housesList.length; i++) {
                //create the dropzone for the house
                var currentHouse = housesList[i];
                dropzones.push(createHouseDropzoneForId(currentHouse ,i));
            }


//Instanciate each dropzone
function createActionDropzoneForId(id) {
            return new Dropzone("#actionDropzone" + id,
                {
                    url: "/houseUrl/" + id,
                    paramName: 'houseList[' + id+ '].files',
                    autoProcessQueue: false
                });
        }

//Handle the submit event to process the files alongside the data
$("input[type=submit]").on("click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            var form = $(this).closest('form');
            if (form.valid() == true) {
                var dropzones = dropzones;
                dropzones.forEach(function (element) {
                    if (element.getQueuedFiles().length > 0) {
                        element.processQueue();
                    } else {
                        element.uploadFiles([]); //send empty
                    }
                })

            }

        });

Here is the model that should be binded (in my ASP controller):

CITY Class:

public class City
    {
        public List<Houses> housesList { get; set; }
        // Other properties as postal code, name, etc
}

HOUSE Class:

public class House
    {
        public HttpPostedFileBase[] files { get; set; }
        // Other properties as color, name, etc
}



from Multiple dropzone in one form

No comments:

Post a Comment