jQuery file upload doesn't submit extra parameters

Question

I need to use the formData parameter available in the jQuery File Upload control to send additional data to the server on submit. The default implementation for formData is to invoke a function that grabs all controls in the form and serializes them to an array (using the jQuery serializeArray() method).

I have controls in my form, but when the file is uploaded, I am not getting any additional data. When I inspect via Fiddler, there is nothing in the request that shows these form fields are being submitted.

Is there something additional that needs to be done to get these to submit?

Btw, these two links discuss formData...

https://github.com/blueimp/jQuery-File-Upload/wiki/Submit-files-asynchronously https://github.com/blueimp/jQuery-File-Upload/wiki/Options ...for this one search the page for formData.

For what its worth, the multipart option is set to true.

Misstep

Can you provide your current code? otherwise we have no idea if you are using the plugin incorrectly etc. – Butchery

Answer 1

I also needed to pass an extra parameter and here is what i used :

$('#fileupload').fileupload({
    formData: {
                    param1: 'test'
                    ,param2: "value2"
                    ,param3: "yasseshaikh"
              }
});

The formData option can be used to set additional form data programmatically.

Georama

Answer 2

Complete code (I modified the answer provided by Yasser)

Add these code into jquery.fileupload.js

submit: function (e, data) {

    $('#fileupload').fileupload({
          formData: {
                 param1: 'test'
                ,param2: "value2"
                ,param3: "yasseshaikh"
          }
    });
},

Alexandretta

Answer 3

If the blueimp plugin isn't a requirement I would really recommend the jquery malsup form.

You can use a regular multipart form and just create a regular file input field along with other input fields of your own choice and everything is submitted as usual.

Reference: http://www.malsup.com/jquery/form/

Code sample:

$('#myForm2').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
}); 

Picofarad

Answer 4

You have to bind Your data to fileupload. Look at this question
Blueimp jQuery file upload, passing extra form data

Mariannamarianne