how to configure custom upload area in dropzone.js with mvc4 form

Question

I just started looking into dropzone.js Is it possible to somehow modify the previewTemplate area to add additional info about the files uploaded and then submit the form to an mvc method?

For simplicity I want to add two fields DocumentTypeID and ExpirationDate for each file that a user wants to upload

@model MyProject.Model.Document

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

<div class="row-fluid">
    <fieldset class="span6">  
        <div class="editor-label">
            @Html.LabelFor(model => model.DocumentTypeID, "DocumentType")
        </div> 
        <div class="editor-field">
            @Html.DropDownList("DocumentTypeID", String.Empty)
            @Html.ValidationMessageFor(model => model.DocumentTypeID)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ExpirationDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ExpirationDate)
            @Html.ValidationMessageFor(model => model.ExpirationDate)
        </div>
    </fieldset>
    <div class="span6">   <div class="dropzone-previews"></div> </div>
</div>
}

---

Here is the controller method which for now should accept one file at a time

    [HttpPost]
    public ActionResult Create(Document document, HttpPostedFileBase file)
    {
        if (ModelState.IsValid && file != null)
        {

            db.Documents.Add(document);
            document.FilePath = ProcessDocumentUpload(Request.Files[0], document.DocumentID);

            db.SaveChanges();
            return "";//? // not sure what to return yet
        }


    }

---

Now the Js function for dropzone

    <script type="text/javascript">
    $(function () {
       // "myAwesomeDropzone" is the camelized version of the HTML element's ID
        Dropzone.options.myAwesomeDropzone = {
            autoDiscover: false,
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 5, // MB
            maxFiles: 1, //for now upload one at a time
           //I started looking at the template and added two elements as an experiment.
            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n <input type=\"text\" data-dz-doc-expiration-date class=\"dz-doc-input\" />\n <select class=\"dz-doc-input\" data-dz-doc-document-type-id  ></select>\n   <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span>✔</span></div>\n  <div class=\"dz-error-mark\"><span>✘</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            //dictDefaultMessage: "Drop files here to upload or click",
            // The configuration that allows the whole form to be submitted on button click
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 1,
            addRemoveLinks: true,
            previewsContainer: ".dropzone-previews", //show a preview in another place
           // The setting up of the dropzone
            init: function () {
                var myDropzone = this;

                // First change the button to actually tell Dropzone to process the queue.
                $("input[type=submit]").on("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                // of the sending event because uploadMultiple is set to true.
                this.on("sendingmultiple", function () {
                    // Gets triggered when the form is actually being sent.
                    // Hide the success button or the complete form.
                });
                this.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                });
                this.on("errormultiple", function (files, response) {
                    // Gets triggered when there was an error sending the files.
                    // Maybe show form again, and notify user of error
                });

            },
            accept: function (file, done) {
                //maybe do something here for showing a dialog or adding the fields to the preview?

            }
        };

    });
</script>

Thanks for looking!

Solution

have you tried to handle the event 'sending'?

$dropzone.on('sending', function (file, xhr, formData) {
    formData.append('id', $id);
});

MVC controller

public JsonResult UploadImage(string id)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase file = Request.Files[i];
        ...
    }           
    return Json(true, JsonRequestBehavior.DenyGet);
}

I've been using also MVC 4 and it has worked well.