jQuery file upload POST data append issue

Question

I am using jQuery file uploader in my Backbone application.

I am facing problem in POST data ie when I upload data then only file which is selected will be added in POST object and one id which is initialized in initializeFileUpload function in formData and this initializeFileUpload function is load in OnLoad

this.ui.uploadAppFile is jquery object

 initializeFileUpload: function() { var that = this, file = ""; var options = { url: FSGlobals.baseURL + 'requests/req_bu_files/file', maxFileSize: 5000000, // 5MB formData: { "Id": that.requestHeaderMod.get("id"), }, add: function(e, data) { file = (data && data.files[0] && data.files[0].name) || ""; that.manualPostData = data; that.ui.filePlaceholder.val(file).change(); } }; if ($('html').hasClass('ie9') || $('html').hasClass('lt-ie9')) { options.forceIframeTransport = true; } else { options.dataType = 'json'; } this.ui.uploadAppFile.fileupload(options); } 

I have one button Submit and at submit time I have to add two more id's in Post Object.

 UploadAction: function() { var that = this; this.manualPostData.submit(). done(function(data, textStatus, jqXHR) { }) .fail(function(jqXHR, textStatus, errorThrown) { }); } 

Now I try to find formData in this.manualPostData but I can't find formData in it.

After Submit I see in Network it's showing formData object with file[] and Id which is declared in initializeFileUpload

Answer 1

According to the documentation, you can use the method submit to add additional values to the request:

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#submit

Here is a fiddle I created to demonstrate how the method can be overridden.

https://jsfiddle.net/LtzvL6s9/

submit: function(e, data) {
  console.log('submit',data, data.formData)
  data.formData = $.extend({}, {'other': 2}, data.formData);
}

I have not been able to send the original id and then append additional data to the form, but you can add everything you need on the submit method.

Hope this helps to solve your issue.

Answer 2

I found One solution:

Before submit pass your values to formData . But as you can see in question there is one more method ie initializeFileUpload you have to initialize your file up-loader setting and all stuff. because if not then at submit time you dont get this.manualPostData As file up-loader object

 UploadAction: function() { var that = this; this.manualPostData.formData = { "requestId": that.requestHeaderMod.get("id"), "status": false, "appId": this.ui.appListSelect.select2("val"), "appDimensionId": this.ui.appDimListSelect.select2("val"), "actionCode": this.ui.actionCodeSelect.select2("val") } this.manualPostData.submit() .done(function(data, textStatus, jqXHR) { // }) .fail(function(jqXHR, textStatus, errorThrown) { //Fail }); 

And pass Formdata={} in initializeFileUpload other wise you have to use

 $.extend(OLd Object, New Object); 

at submit time