How to set content type to multipart/form-data in extjs?

Question

I am using extjs2.0.1. I am using filefield plugin for file uplaod functionality. For Upload button I want the content-Type to be set as 'multipart/form-data'. Right now in fiddler I can see content type set to Content-Type: application/x-www-form-urlencoded. How can I achieve this?

My code is as follows:

Ext.onReady(function() {
Ext.QuickTips.init();
    var uploadFile={
        xtype : 'fieldset',
        title : 'Search',
        autoHeight : true,
        items : [{
                    xtype : 'fileuploadfield',
                    emptyText : 'select file',
                    fieldLabel : 'file',
                    id : 'file-path',
                    buttonCfg : {
                        text :  'browse'
                    }
                }],
        buttons : [{
                    text : 'upload',
                    handler : function() {
                        Path = fp.form.findField('file-path').getValue();
                        var box = Ext.MessageBox.wait('uploading file ','please_wait');

                        if (fp.getForm().isValid()) {
                            Ext.Ajax.request({
                                url : 'uploadFile.jsp',
                                params:'file-path='+Path,
                                method : 'POST',
                                waitMsg : 'Uploading your file...',
                                success : function(response) {
                                    box.hide();
                                    Ext.Msg.alert("Success","Upload Successfull!");

                                },
                                failure : function() {
                                    box.hide();
                                    Ext.Msg.alert("Failure","Upload Failed!");
                                }
                            });
                        }
                    }

                }]


};
var fp = new Ext.FormPanel({
            autoHeight : true,
            bodyPadding: 10,
            margin : '0 0 20',
            frame : 'true',
            renderTo : 'addvoiceline',
            items : [
                       uploadFile
                    ]        
        });

});

Answer 1

use headers property.

usual proxy config:

proxy: {
        type: 'ajax',
        url: "../search",
        actionMethods:  {create: "POST", read: "POST", update: "POST", destroy: "POST"},
        headers: { 'Content-Type': 'multipart/form-data' },
        limitParam: false,
        startParam: false,
        pageParam: false,
        extraParams: JSON.stringify({
        rows: pageSize,
        role: "Admin",
        index: myIndex,
        question: searchPhrase
    })

set its headers as below:

headers: { 'Content-Type': 'multipart/form-data' },

As a part of your code, it is as below (headers added):

Ext.Ajax.request({
   url : 'uploadFile.jsp',
   params:'file-path='+Path,
   method : 'POST',
   headers: { 'Content-Type': 'multipart/form-data' },
   waitMsg : 'Uploading your file...',
   success : function(response) {
      box.hide();
      Ext.Msg.alert("Success","Upload Successfull!");
   },
   failure : function() {
       box.hide();
       Ext.Msg.alert("Failure","Upload Failed!");
   }
});

Answer 2

In extjs3 I would do it by setting fileUpload to true in form config. Maybe this would work in extjs2.