File Upload from Sencha Touch 2.3 app

[Kaustav]

Hie i am developing a Simple Sencha App on Sench touch 2..3 version and CMD 4 and in my app i have form which has got different fields including a file upload field where by the data from the field is sent to the server.But i have got a problem when i test the app by native apk in my android phone(API level 16) the file upload field is not working. I search lots of links but couldn't find the solution ...is the file upload is not supported in sencha touch 2.3 native apk?
I am posting my form.js here
Form.js

Ext.define('Test.view.Contact',{
           extend: 'Ext.form.Panel',
           xtype: 'contactform',
           
           requires: [
                      'Ext.form.FieldSet',
                      'Ext.field.Email',
                      'Ext.field.File',
                      'Ext.ProgressIndicator',
                      'Ext.device.filesystem.Sencha'
            ],
           
           config:{
               
                    progress: function(e) {
                        loadingText: "Uploading: {percent}%";
                     },


                    //Progress can also be a simple callback
                    progress: function(e) {
                        console.log((e.loaded / e.total) * 100);
                     },
                
               title: 'Contact',
               iconCls: 'user',              
               xhr2: true,
               progress:true,
               xtype: 'formpanel',
               url: 'http://xyz.net/contact-test.php',
               layout: 'vbox',
               
             items: [                    
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Enquiry'
                        },
                     {
                         xtype: 'fieldset',
                         title: 'Contact Us',
                         instructions: '(email is not required)',
                         
                           items: [
                       {
                           xtype: 'textfield',
                           name: 'Name',
                           label: 'Name'
                           },
                        {
                           xtype: 'emailfield',
                           name: 'Email',
                           label: 'Email'
                           },
                           
                        {
                           xtype: 'textareafield',
                            name: 'Message',
                           label: 'Message'
                           },
                        {
                            xtype:"filefield",
                            label: "Select image(s):",
                            name: "photos",
                            accept:"image/jpeg",
                            multiple: true
                        }
                       ] 
                    },
                    {
                        xtype: 'button',
                        text: 'Send',
                        ui: 'confirm',
                        handler: function() {
                                //Ext.Viewport.add(progressIndicator);
                              //  var form = Ext.Viewport.down("formpanel");
                                var input = Ext.Viewport.down("filefield").getComponent().input;
                                var files = input.dom.files;
                                for(var i = 0 ; i<files.length ; i++){
                                    var file = files[i];
                                    if(file.size > 2097152) {
                                        Ext.Msg.alert("JPG Must be less then 2MB");
                                        return;
                                    }
                                    
                                }


                                this.up('contactform').submit();
                        }
                    }                    
                    ]
                      
            
                
           }
});

[mitchellsimoens]

I actually remember file upload having a bug in it when helping someone else. Will see if I can find the overrides I made to get it working.

[ksmallik]

I have the same problem in uploading my files... I hope there will be a post regarding this issue

[mitchellsimoens]

The bug I mentioned is TOUCH-5081 and I have a merge request in for Touch 2.3.2 at the moment. You can try this override:

Ext.define('Override.data.Connection', {
    override : 'Ext.data.Connection',

    onUploadComplete : function(frame, options, id) {
        // bogus response object
        var response = {
                responseText : '',
                responseXML  : null,
                request      : {
                    options : options
                }
            },
            doc, body, firstChild;

        try {
            doc = (frame.contentWindow && frame.contentWindow.document) || frame.contentDocument || window.frames[id].document;

            if (doc) {
                if (doc.hasOwnProperty('body') && doc.body) {
                    body = doc.body;
                }

                if (body) {
                    firstChild = body.firstChild || {};

                    if (this.textAreaRe.test(firstChild.tagName)) { // json response wrapped in textarea
                        response.responseText = firstChild.value;
                    } else {
                        response.responseText = firstChild.innerHTML;
                    }

                    //in IE the document may still have a body even if returns XML.
                    response.responseXML = body.XMLDocument;
                }
            }
        } catch (e) {
            response.success = false;
            response.message = 'Cross-Domain access is not permitted between frames. XHR2 is recommended for this type of request.';
            response.error = e;
        }

        this.onAfterUploadComplete(response, frame, options);
    }
});

[ksmallik]

Thanks for the reply. Just wanted to know which folder in the app I should put the override in. This is the first time I have come up against an override. Is it appname/touch/src ?
Thanks again...

[mitchellsimoens]

You can put it in any directory, just need to tell Ext.Loader where the Override class name will be. So if you put it in /overrides/data/Connection.js then you need to have Ext.Loader.setPath('Override', 'overrides/');

You also need to tell Cmd (if you are using Cmd) where it is so you can open the .sencha/app/sencha.cfg and add overrides to the app.classpath property.

[ksmallik]

Hi mitchell ,
I am trying to write an app to upload multiple files in Sencha Touch 2.3. I am going to use the new XHR2 with progress bar feature. My questions are these...
1. Is it possible to have a progress bar for each file being uploaded?
2. If unfeasible, do I need to write a custom component for the progressbar? (I am new to writing custom components :-( ... where do I start?)

Thanks.

[fabio.parra]

Mitchell, do you know why this check exists?

if (doc.hasOwnProperty('body') && doc.body) {
   body = doc.body;
}

In firefox doc.hasOwnProperty('body') returns false.
https://bugs.webkit.org/show_bug.cgi?id=80060