Dropzone with some other parameters

Question

I upload image using Dropzone. I need to send some other values via that(Some text values).In my scenario i need to send Product Name to the controller(pls see some comment in code)

Image successfully comes to the Controller's side,when button click.

HTML Code :

<input type="text" name="text" id="txtprod" class="form-control" />

<div id="dropzonffe" style="width: 55%; margin-left: 25%">
    <form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm"></form>
</div>

jQuery Code :

<script type="text/javascript">
Dropzone.options.dropzoneJsForm = {

    autoProcessQueue: false,
    init: function () {
        var submitButton = document.querySelector("#btnSubmit");
        var myDropzone = this;

        submitButton.addEventListener("click", function () {
            var ProductName = $("#txtprod").val();//<-- I want to send this Productname to the controller also.
            myDropzone.processQueue();
        });
    }
};
</script>

My Controller :

public ActionResult SaveProducts () {
    bool isSavedSuccessfully = false;

    foreach (string fileName in Request.Files) {
        HttpPostedFileBase file = Request.Files[fileName];
        isSavedSuccessfully = true;
    }
    return Json (new { isSavedSuccessfully, JsonRequestBehavior.AllowGet });
}

I need to pass the Product Name to the controller. How can I do it ?

Answer 1

I found the solution to my problem.Here i have paste it for future help.There's a event in DropZone called sending.you can pass additional parameters via append to form data.

 Dropzone.options.dropzoneJsForm = {
    autoProcessQueue: false,
    init: function () {
        var submitButton = document.querySelector("#btnSubmit");
        var myDropzone = this;

        this.on("sending", function (file, xhr, formData) {
            formData.append("ProductName", $("#txtprod").val());


        });

        submitButton.addEventListener("click", function () {
        myDropzone.processQueue();

        });

    }
};

Access it in Server Side

 public ActionResult SaveProducts(string ProductName)
    {

     }

Answer 2

You can create a model

public class ProductModel {
    public string Name {get;set;}
}

Add inside the form the Name

<div id="dropzonffe" style="width: 55%; margin-left: 25%">
    <form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm">
        @Html.EditorFor(m => m.Name);
    </form>
</div>
<button id="btnSubmit">Submit</button>

And pass in Action the Model, the value from inputs will be sent alongside with files.

public ActionResult SaveProducts(ProductModel product)
{
     // rest of the logic

Answer 3

Add the values as a hidden field to your form and they will be sent to your controller

<form action="~/Admin/SaveProducts" class="dropzone" id="dropzoneJsForm">
    <input type="hidden" value="SomeVal" />

and then

public ActionResult SaveProducts(string SomeVal) 
{

   ..controller body
}

or the FormCollection object would work as well

public ActionResult SaveProducts(FormCollection fc) 
{
     //use fc["SomeVal"]
   ..controller body
}