File Not Posting with dropzone.js when combined with other form data

Question

I'm doing something similar to this post dropzoneForm data with file. I'm using MVC 5/Razor syntax. I'm able to successfully see my model data when debugging however my Request.Files is always 0.

Within my create.cshtml I have code similar to this. My model is large so I am not including everything.

@using (Html.BeginForm())

@Html.AntiForgeryToken()
<div class="container">
<div class="dropzone" id="myDropzone"> HERE </div>
<div class="row botborder paddbot" id="addbuilder" style="display:none">
    <div class="form-group">
        <div class="col-md-4 ">
            <span class="control-label ">Builder Name</span>
            <span class="glyphicon glyphicon-asterisk text-danger" aria-hidden="true"></span>
            @Html.EditorFor(model => model.BuilderModel.Builder, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.Builder, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4 ">
            <span class="control-label">Builder's WebSite</span>
            @Html.EditorFor(model => model.BuilderModel.BuilderWebSite, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.BuilderWebSite, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4 ">
            <span class="control-label">Builder's Phone</span>
            @Html.EditorFor(model => model.BuilderModel.BuilderPhone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.BuilderPhone, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

@End of row@

You can see the idea.. I have just added one div inside of the form for the user to drop the files too.

Within the create.cshtml I also have the following JS code

Dropzone.options.myDropzone = { 
    url: 'ReviewModels/Create',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function () {
        dzClosure = this; 
        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function (e) {
            alert('sub1');
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function (data, xhr, formData) {
            alert(formData)
        });
    }
}

With in the controller I have the following code and the request.files is not showing any files but the model data is coming across successfully. I'm not sure what I am missing. Any help would be appreciated and if I can provide more information I will do that. Thank you

 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(HolderModel review)
    {
         if (review.BuilderModel.Builder ==null)
            // if select existing builder
        {
            foreach (string fileName in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[fileName];
                //Save file content goes here
                var fName = file.FileName;
            }

score 2 · Answer 1 · 2016-09-18T21:19:32.483

You need to do two things:

Set the form id myDropZone so it'll be matched up when initializing Dropzone. Don't create a seperate div inside the form called myDropZone
Make it multipart/form-data

Your @using should look like:

@using (Html.BeginForm("ActionMethodName", "ControllerName", FormMethod.Post, new
{
  enctype = "multipart/form-data",
  id = "myDropZone"
}))

You don't have to do any xhr work yourself to send form data over, Dropzone sends both file and form values in the same request.

Add a button to submit all the data (somewhere within the form tag):

<button id="btnStartUpload">Upload All</button>

And then in your Dropzone init this needs to be there:

    init: function () {
    var myDropzone = this;
    var submitButton = document.getElementById("btnStartUpload");

    submitButton.addEventListener("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#StartOrCancel").hide();

        myDropzone.processQueue();
        myDropzone.options.autoProcessQueue = true;
    });
...

Note that

    e.preventDefault();
    e.stopPropagation();

are very important, otherwise you'll get a double form submission, one through Dropzone's xhr, and the second through a full POST

File Not Posting with dropzone.js when combined with other form data

1 Answers1