1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    44
    Vote Rating
    0
    Dariusz is on a distinguished road

      0  

    Default A simple Form with uploadFile field inside!?

    A simple Form with uploadFile field inside!?


    I found a lot of threads regarding uploadFile, but they are all so complicated!!

    What I am looking for, is a simple Form maybe with some textfield and a file upload.

    Does anyone have a link to a 'tutorial', 'example' or a 'thread' where exactly that simple Form is explained?

    I can't find anything like that...

    Thanks,
    Dariusz

  2. #2
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    Code:
    formPanel = new Ext.form.FormPanel({
                url: index.php,
                fileUpload: true,
                labelAlign: 'top',
                buttonAlign: 'center',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'Select File to Upload',
                    inputType: 'file',
                    name: 'userfile',
                    allowBlank: false,
                    width: 200,
                },
                buttons: [{
                    text: 'UpLoad',
                    handler: function() {
                        var form = formPanel.getForm();
                        if (form.isValid()) {
                            form.submit({
                                waitMsg: 'Uploading...',
                                success: this.uploaded,
                                failure: this.failure,
                                scope: this
                            });
                        }
                    },
                    scope: this
                }]
            })

  3. #3
    Ext User
    Join Date
    Sep 2007
    Posts
    44
    Vote Rating
    0
    Dariusz is on a distinguished road

      0  

    Default


    Thanks!

    If I use your code I receive the following message in firebug:
    PHP Code:
    missing in parenthetical
    This server has encountered an internal error which prevents it from fulfilling 
    ... 
    Does it mean, that the server side code, can't deal with the parameter, which are being send to it?

    By the way, what exactly means: "scope: this"?

    Thanks in advance for any help!

    Dariusz

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    44
    Vote Rating
    0
    Dariusz is on a distinguished road

      0  

    Default


    By the way, in the attachment you can see what I am trying to do. As you can see the style in all fields is as I wanted, except the file upload thing. Is there a way to set it as the others are?

    Dariusz
    Attached Images

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It is trying to evaluate the response as JSON. That is a javascript literal.

    What is coming back from the server is a server error. Look at Firebug.

    In fact, you can't return JSON from a file upload - you must use an XmlReader in your Form, and return the response from your upload handler in XML format.

    This is because the response is loaded into an iframe and becomes a document, so it must be either HTML or XML

  6. #6
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    Animal, you can return json from a file upload.
    I am returning {success: {message: 'success message'}}
    or
    {failure: {message: 'failure message'}}

    Code:
                            form.submit({
                                waitMsg: 'Uploading...',
                                success: function(form, action) {alert(action.result.success.message)},
                                failure: function(form, action) {alert(action.result.failure.message)},
                                scope: this
                            });

  7. #7
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    Dariusz, my code was just an example on how to do it and not something for you to cut and paste.
    Regarding scope this, there is a sticky on this subject in Ext 1 forum.

  8. #8
    Ext User
    Join Date
    Sep 2007
    Posts
    44
    Vote Rating
    0
    Dariusz is on a distinguished road

      0  

    Default


    Santosh, I understand, but still don't know what to do. I am sending a form to the server and saving the data into the databases, except the file of course. The file I want to save locally on the server and after all this is done, I would like to send a JSON Object back to the frontend.

    Any idea, how I can solve it?

    Dariusz

  9. #9
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611
    Vote Rating
    0
    santosh.rajan is on a distinguished road

      0  

    Default


    Can i see your form submitting code? What are you using on server side? PHP?

  10. #10
    Ext User
    Join Date
    Sep 2007
    Posts
    44
    Vote Rating
    0
    Dariusz is on a distinguished road

      0  

    Default


    Ok, I hope I won't upset anybody if I post my whole java script code..

    Here it is:
    PHP Code:
    Ext.onReady( function(){
     
        
    Ext.QuickTips.init();
         
    Ext.QuickTips.enable();
         
        
    Ext.form.Field.prototype.msgTarget 'under';
        
        
    /* Address data */
        
    var addressCodeReader = new Ext.data.JsonReader({
            
    totalProperty"results",
            
    root"rows",
            
    id'addressID'
        
    },[
            {
    name'addressID'type'int'},
            {
    name'address'type'string'},
            {
    name'description'type'string'}
          ]
        );
        
        var 
    addressStore = new Ext.data.Store({
            
    proxy:  new Ext.data.HttpProxy( { url'/IpnServlet?action=readAddressCodes' } ),
            
    readeraddressCodeReader
        
    });
        
        
        
    /* Category data */
        
    var ipnCategoryReader = new Ext.data.JsonReader({
            
    totalProperty"results",
            
    root"rows",
            
    id"categoryID"
        
    },[
            {
    name'categoryID'type'int'},
            {
    name'category'type'string'}
          ]
        );
        
        var 
    ipnCategoryStore = new Ext.data.Store({
            
    proxy:  new Ext.data.HttpProxy( { url'/IpnServlet?action=readIpnCategory' } ),
            
    readeripnCategoryReader
        
    });
        
        
        
        var 
    ipnForm = new Ext.FormPanel({
            
    el'createIpn',
            
    id'createIpn',
            
    method'post',
            
    labelAlign'left',
            
    labelWidth110,
            
    frametrue,
            
    title'Submit IPN',
            
    bodyStyle'padding:5px 5px 0',
            
    height600,
            
    width600,
            
    scopethis,
            
    fileUploadtrue,
            
            
    items: [{
                
    xtype'fieldset',
                
    title'Section Information',
                
    autoHeight:true,
                
    //defaults: { width: 430 },
                
    defaultType'textfield',
                
                
    items :[
                    new 
    Ext.form.ComboBox({
                            
    fieldLabel'Address Code',
                            
    storeaddressStore,
                            
    hiddenName'addressID',
                            
    displayField'address',
                            
    valueField'addressID',
                            
    typeAheadtrue,
                            
    triggerAction'all',
                            
    forceSelectiontrue,
                            
    emptyText'Select your address code...',
                            
    selectOnFocustrue,
                            
    allowBlankfalse,
                            
    //width: 190
                            
    anchor'98%'
                    
    })
                    ,
                    new 
    Ext.form.ComboBox({
                            
    fieldLabel'Ipn Code',
                            
    storeipnCategoryStore,
                            
    hiddenName'categoryID',
                            
    displayField'category',
                            
    valueField'categoryID',
                            
    typeAheadtrue,
                            
    triggerAction'all',
                            
    forceSelectiontrue,
                            
    emptyText'Select the IPN Code...',
                            
    selectOnFocustrue,
                            
    allowBlankfalse,
                            
    //width: 190
                            
    anchor'98%'
                    
    })
                ]
            },{
                
    xtype'fieldset',
                
    title'IPN Information',
                
    autoHeighttrue,
                
    //defaults: { width: 430 },
                
    defaultType'textfield',
                
    items :[
                    {
                        
    fieldLabel'IPN Title',
                        
    allowBlankfalse,
                        
    name'title',
                        
    anchor'98%'
                    
    },
                    {
                        
    xtype'textfield',
                        
    fieldLabel'Upload file',
                        
    inputType'file',
                        
    width400,
                    
    blankText'Please choose a file',
                        
    name'uploadFile'
                    
    },
                    {
                        
    xtype'htmleditor',
                        
    height100,
                        
    enableColorsfalse,
                        
    enableAlignmentsfalse,
                        
    enableFontfalse,
                        
    enableFontSizefalse,
                        
    enableSourceEditfalse,
                        
    name'description',
                        
    fieldLabel'Description',
                        
    allowBlankfalse,
                        
    anchor'98%'
                    
    }
                ]
            }
            ],
     
            
    buttons: [{
                
    text'Save',
                
    type'submit',
                
    name'send',
                
    disabledfalse,
                
    handlersaveIPN
            
    },{
                
    text'Cancel'
            
    }]
            
        });
        
        
        function 
    saveIPN() {
                                
            
    ipnForm.form.submit({
                    
    url '/IpnServlet?action=saveIPN',
                    
    //params: { ipnID: ipnID },
                    
    waitMsg:'Saving Data...',
                    
                    
    success: function( resultrequest )
                    {
                        
    Ext.Msg.show({
                            
    title'Confirmation',                        
                            
    msg'Your data has been updated!'
                            
    buttonsExt.Msg.OK,
                            
    fn: function(){
                                
    result.reset();
                            }
                        });
                    },
                    
    failure: function( resultrequest )
                    {
                        
    Ext.Msg.show({
                            
    title'Failure',
                            
    msg'You must fill out the form before sending it!'
                            
    buttonsExt.MessageBox.OK,
                        });
                    }
                    
            });
        }
        
        function 
    showIPNS()
        {
            
    document.location "/IpnServlet?action=ipn";
        }
        
        
    ipnForm.render();
        
    }); 
    On the server side, I am using Java.

Thread Participants: 2