title: ExtJs 4.1 File Upload in Ajax fashion
body: <p>I have a requirement in which I need to upload a file in ajax manner using ExtJs. My form is already having many other fields like text, textarea etc. I have included my filefield in a separate form within the parent form. Also, that form have an upload button which performs the functionality while clicking on it. In that button handler, I am submitting the form which holds the file field. Its working like a charm. The only problem is that the page will get refreshed. I don't want that. I need to do this upload in an ajax manner. </p>
  
  <p>Is that possible using ExtJs? I know that we can prevent the page refresh easily when we use pure html/javascript by setting the form target to iframe.</p>
  
  <p>Do we have any such solutions for this?</p>
  
  <p>Please give some ideas or solution to this problem</p>
  
  <p>This is a snippet of my code:</p>
  
  <pre><code>{
              xtype: 'form',                
              items: [
                  {
                    xtype: 'filefield',
                    name: 'file',
                    fieldLabel: '&lt;b&gt;Presentation&lt;/b&gt;',
                    msgTarget: 'side',
                    labelAlign: 'top',
                    width: 300,
                    allowBlank : true,
                    id: 'file',
  
                    buttonCfg: {
                      text: '',
                      iconCls: 'upload-icon'
                   }
                  },
                  {
                    xtype: 'panel',
                    id: 'selectdFileName',
                    html: '&lt;b&gt;' + presenationFile + '&lt;/b&gt;'
                  },
                  {
                    xtype: 'panel',
                    html: '&lt;br/&gt;'
                  },
                  {
                    xtype: 'button',
                    text: 'Upload',
                    handler: function() {
                      var form = this.up('form').getForm();
                      form.target = 'upload_target';
                      if (form.isValid()) {
                        form.submit({
                          url: contextPath + '/app/uploadFile',
                          params: {
                            id: formId
                          },
                          waitMsg: 'Uploading presentation...',
                          success: function(form, action) {
                            var respJson = Ext.JSON
                                    .decode(action.response.responseText);
                            Ext.getCmp('selectdFileName').update(
                                    "&lt;b&gt;" + respJson.path + "&lt;/b&gt;");
                          }
                        });
                      }
                    }
                  }]
  
            }
  </code></pre>
  
  <p>In the above code, another form with may other fields is enclosing this form.</p>
  
  <p>Let me know whether this give you  a better understanding of my problem.</p>