Dropzone not bound to model

Question

I'm using dropzone.js to upload files in a form that include other fields.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.DropDownListFor(x => x.installation, Model.installationList, new { data_placeholder = "Select one item please" })
    @Html.ValidationMessageFor(model => model.installation, "", new { @class = "text-danger" })

<div id="files" name="files" class="dropzone"></div>

<input type="submit" value="@Resources.Global.Save" class="btn btn-default" />
}

JS:

Dropzone.options.files = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            paramName: "files", // The name that will be used to transfer the file
            maxFilesize: 8, // MB
            url: "/ActionPlan/Home/Create"  // Same as URL generated from the form
        };

My model:

        // installation 
        [Display(Name = "Anomaly_Installation", ResourceType = typeof(Resources.ActionPlan))]
        public int installation { get; set; }
        public IEnumerable<SelectListItem> installationList { get; set; }

// files uploaded
        public HttpPostedFileBase[] files { get; set; }

When I submit the form, no files are attached to the model, but data from location is OK, why? How to fix this issue?

EDIT: I've made some changes but same issue:

HTML (Razor)

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "myForm" }))

And I've added:

<div class="dropzone-previews"></div>
                <div class="fallback">
                    <!-- this is the fallback if JS isn't working -->
                    <input name="files" type="file" multiple />
                </div>

JS

Dropzone.options.files = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 25,
            maxFiles: 25
        };

When I inspect headers sent, I didn't see any files (this is the entire form):

------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="__RequestVerificationToken"

hQJmhZpJf0LqOo3ZZCgCUjMafbXdjNGmzM8QrnL2bjtWUerKZiyJakNJljNsM_DowRv5641qUyc0zjRcBIUh2I1AZ2LBBYko8UzrhPFvnzeWELBVBLwTmtfo6KUX5MChk_aIKvX-aEcpremYXJps1A2
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyId"

0
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="beginDate"

09/04/2015
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomaly"

wsqfdgsqdfsqz
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="analysis"

wsdwsdfg
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyTypeSelected"

2
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="piloteSelected"

52333
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyOriginSelected"

3
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyOriginData"


------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="installation"

1
------WebKitFormBoundaryAKklxx9XCCYQ22Zl--

FINAL SOLUTION: HTML:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "myForm" }))
{
...
<div class="fallback">
                    <!-- this is the fallback if JS isn't working -->
                    <input name="files" type="file" multiple />
                </div>
}

JS : Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone('#myForm', {
            paramName: 'files',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 25,
            maxFiles: 25
        });

        $("form").on("submit", function (event) {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });

for this im my model:

public HttpPostedFileBase[] files { get; set; }

Answer 1

I guess the options you specified never get applied. That would explain why no files are attached to your model once you submit the form as they were already processed on upload. To proper apply the desired options you need to turn off the auto discovery function from Dropzone:

Dropzone.autoDiscover = false;

That way you have to programmatically initialize Dropzone:

var myDropzone = new Dropzone('form', {
    paramName: 'files',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 1
});

Demo

autoProcessQueue

When set to false you have to call myDropzone.processQueue() yourself in order to upload the dropped files. See below for more information on handling queues.

Answer 2

1) Open your tool develop console in your browser and put an breakpoint in "dropzone.uploadFile" (see the image: http://www.tiikoni.com/tis/view/?id=033ad74) 2) Drop an image an check if file is no empty

If empty, the error probably are in the script of backend (usually an controller in php, asp, ecc). If is not empty,test an clean version of dropzone (http://www.dropzonejs.com/) and take a look to the differences.

Sorry for my terrible English :)