ExtJs 4.1 File Upload in Ajax fashion

Question

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.

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.

Do we have any such solutions for this?

Please give some ideas or solution to this problem

This is a snippet of my code:

{
            xtype: 'form',                
            items: [
                {
                  xtype: 'filefield',
                  name: 'file',
                  fieldLabel: '<b>Presentation</b>',
                  msgTarget: 'side',
                  labelAlign: 'top',
                  width: 300,
                  allowBlank : true,
                  id: 'file',

                  buttonCfg: {
                    text: '',
                    iconCls: 'upload-icon'
                 }
                },
                {
                  xtype: 'panel',
                  id: 'selectdFileName',
                  html: '<b>' + presenationFile + '</b>'
                },
                {
                  xtype: 'panel',
                  html: '<br/>'
                },
                {
                  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(
                                  "<b>" + respJson.path + "</b>");
                        }
                      });
                    }
                  }
                }]

          }

In the above code, another form with may other fields is enclosing this form.

Let me know whether this give you a better understanding of my problem.

Can you post some code? I do an approach just like this, but I've never seen the page refresh. Are you using Ext JS MVC, or are you doing something else? — existdissolve, Aug 01 '13 at 11:19

score 0 · Answer 1 · edited Feb 05 '14 at 10:29

0

In your upload button, i would try something like:

//store the vals
var vals = form.getValues();

//then, in form.submit...

form.submit({
    params: {
        values: vals
    }
});

The Json should handle all the object conversion for you (so you'll have one "values" object with the different fields of your vals object (e.g: name: 'frank', id: '19381' etc..))

edited Feb 05 '14 at 10:29

Lorenz Meyer

19,166
22
75
121

answered Aug 02 '13 at 14:45

FuriousFolder

1,200
1
12
27

ExtJs 4.1 File Upload in Ajax fashion

1 Answers1