1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    vamsi4extjs is on a distinguished road

      0  

    Default EXTJS FORM WITH FILE UPLOAD- SAVING FORM DATA AND FILE AT A TIME TO THE DATABASE

    EXTJS FORM WITH FILE UPLOAD- SAVING FORM DATA AND FILE AT A TIME TO THE DATABASE


    I am new to EXTJS and learning the integration of Spring MVC with extjs. I am trying to save form data and a file to the database but getting an error saying Server-unsupported format.

    Code:
    Ext.define('BrazilJS.view.contact.Edit', {
        extend: 'Ext.window.Window',
        alias : 'widget.contactedit',
    
        requires: ['Ext.form.Panel','Ext.form.field.Text'],
    
        title : 'Edit Contact',
        layout: 'fit',
        autoShow: true,
        width: 280,
        fileUpload:true,
        isUpload: true,
        enctype:'multipart/form-data',
        
        iconCls: 'icon-user',
    
        initComponent: function() {
            this.items = [
                {
                    xtype: 'form',
                    padding: '5 5 0 5',
                    border: false,
                    style: 'background-color: #fff;',
                    autoScroll : true,
                    
                    
                    fieldDefaults: {
                        anchor: '100%',
                        labelAlign: 'left',
                        allowBlank: false,
                        combineErrors: true,
                        msgTarget: 'bottom'
                         
                    },
                    
                    
                    items: [
                        {
                            xtype: 'textfield',
                            name : 'id',
                            fieldLabel: 'id',
                            hidden:true
                        },    
                        {
                            xtype: 'textfield',
                            name : 'name',
                            fieldLabel: 'Name'
                           
                           // plugins: new Ext.ux.plugin.FormatPhoneNumber()
                        },
                        {
                            xtype: 'textfield',
                            name : 'phone',
                            fieldLabel: 'Phone',
                            regex: /^\d{3}-\d{3}-\d{4}$/,
                            regexText: 'Must be in the format xxx-xxx-xxxx'
            
                        },
                       
                       {
                            xtype: 'textfield',
                            name : 'email',
                            vtype: 'email',
                            fieldLabel: 'Email',
                            emailMask : /[a-z0-9_.-@]/i
                            
                        },
                    
                        {
                            xtype: 'textfield',
                            name : 'id',
                            maskRe: /[0-9]/,
                            fieldLabel: 'ID'
                        },
                          {
                            xtype: 'datefield',
                            grow      : true,
                            anchor    : '100%',
                            name : 'dateposted',
                            invalidText: '"{0}" not a valid Date. "{1}" good.', // custom error message text
                            format:'Y-m-d',
                            fieldLabel: 'DATE',
                            maxValue: (new Date())
                         },
                            
                       {
                            xtype: 'textfield',
                            name : 'advisor',
                            fieldLabel: 'Advisor'
                        },
               
                        {
                            xtype: 'textareafield',
                            grow      : true,
                            anchor    : '100%',
                            name : 'topic',
                            fieldLabel: 'DISCUSS'
                        },
                        {
                              xtype: 'filefield', 
                              name: 'fileupload',
                              anchor: '100%',
                              fieldLabel: 'File upload',
                              buttonText: 'Select a File...'
                           }] 
           
              }];
                    
            this.dockedItems = [{
                xtype: 'toolbar',
                dock: 'bottom',
                id:'buttons',
                ui: 'footer',
                items: ['->', {
                    iconCls: 'icon-save',
                    itemId: 'save',
                    text: 'Save',
                    action: 'save'
                },{
                    iconCls: 'icon-reset',
                    text: 'Cancel',
                    scope: this,
                    handler: this.close
                }]
            }];
    
            this.callParent(arguments);
        }
    });
    
    and my action : save function is :
     updateUser: function(button) {
            
            
            var win    = button.up('window'),                                                             
                form   = win.down('form'),
                record = form.getRecord(),
                values = form.getValues();
            
            
            if (values.id > 0){
                record.set(values);
            } else{
                record = Ext.create('COM.model.Contact');
                record.set(values);
                record.setId(0);
                this.getContactsStore().add(record);
            }
            
            win.close();
            this.getContactsStore().sync();
        },
    Can you please help me out on how to send both form data and a blob object(file) to the database. I really appreciate it. Thanks in advance.
    Last edited by scottmartin; 30 Jun 2012 at 3:12 PM. Reason: Please format your code!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      -1  

    Default


    What format is your server expecting? What is the config of you model/proxy/store?

    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    vamsi4extjs is on a distinguished road

      0  

    Default HI SCOTT Here is the M-V-C EXTJS CLIENT CODE

    HI SCOTT Here is the M-V-C EXTJS CLIENT CODE


    Thanks for the reply. My Client code is below. With EXTJS MVC and my server is expecting JSON OBJECT FROM THE CLIENT
    My Form VIEW:
    Ext.define('BrazilJS.view.contact.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.contactedit',


    requires: ['Ext.form.Panel','Ext.form.field.Text'],


    title : 'Edit Contact',
    layout: 'fit',
    autoShow: true,
    width: 280,
    fileUpload:true,
    isUpload: true,
    enctype:'multipart/form-data',

    iconCls: 'icon-user',


    initComponent: function() {
    this.items = [
    {
    xtype: 'form',
    padding: '5 5 0 5',
    border: false,
    style: 'background-color: #fff;',
    autoScroll : true,
    fileUpload:true,
    isUpload: true,
    enctype:'multipart/form-data',



    fieldDefaults: {
    anchor: '100%',
    labelAlign: 'left',
    allowBlank: false,
    combineErrors: true,
    msgTarget: 'bottom'

    },


    items: [
    {
    xtype: 'textfield',
    name : 'id',
    fieldLabel: 'id',
    hidden:true
    },

    {
    xtype: 'textfield',
    name : 'name',
    fieldLabel: 'Name'
    },
    {
    xtype: 'textfield',
    name : 'phone',
    fieldLabel: 'Phone',
    regex: /^\d{3}-\d{3}-\d{4}$/,
    regexText: 'Must be in the format xxx-xxx-xxxx,' },
    {
    xtype: 'filefield',
    name: 'fileupload',
    anchor: '100%',
    fieldLabel: 'File upload',
    buttonText: 'Select a File...'
    }]

    }];

    this.dockedItems = [{
    xtype: 'toolbar',
    dock: 'bottom',
    id:'buttons',
    ui: 'footer',
    items: ['->', {
    iconCls: 'icon-save',
    itemId: 'save',
    text: 'Save',
    action: 'save'
    },{
    iconCls: 'icon-reset',
    text: 'Cancel',
    scope: this,
    handler: this.close
    }]
    }];
    this.callParent(arguments);
    }
    });

    My Save Function in Controller:

    updateUser: function(button) {


    var win = button.up('window'),
    form = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();


    if (values.id > 0){
    record.set(values);
    } else{
    record = Ext.create('BrazilJS.model.Contact');
    record.set(values);
    record.setId(0);
    this.getContactsStore().add(record);
    }

    win.close();
    this.getContactsStore().sync();
    },
    MY STORE WITH PROXY:
    Ext.define('BrazilJS.store.Contacts', {
    extend: 'Ext.data.Store',
    model: 'BrazilJS.model.Contact',
    autoLoad: true,
    pageSize: 35,
    autoLoad: {start: 0, limit: 35},

    proxy: {
    type: 'ajax',
    api: {
    read : 'contact/view.action',
    create : 'contact/create.action',
    update: 'contact/update.action',
    destroy: 'contact/delete.action'
    },
    reader: {
    type: 'json',
    root: 'data',
    successProperty: 'success'
    },
    writer: {
    type: 'json',
    writeAllFields: true,
    encode: false,
    root: 'data'
    },
    listeners: {
    exception: function(proxy, response, operation){
    console.log(proxy, response, options);
    Ext.MessageBox.show({
    title: 'REMOTE EXCEPTION',
    msg: operation.getError(),
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.Msg.OK
    });
    }
    }
    }
    });

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    vamsi4extjs is on a distinguished road

      0  

    Default HI SCOTT - MY FIRE BUG is showing this error.

    HI SCOTT - MY FIRE BUG is showing this error.


    JSON
    data Object { id=0, name="mai", phone="899-8", more...}
    Source
    {"data":{"id":0,"name":"mai","phone":"899-8","email":"manish@gmail.com","redid":"877","advisor":"Lewis","topic":"HELLO WORLD","dateposted":"2012-06-07","fileupload":""}}

    IN RESPONSE:

    >HTTP Status 415 - </h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u></u></p><p><b>description</b> <u>The server refused this request because the request entity is in a format not supported by the requested resource for the requested method ().</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/7.0.27</h3></body></html>
    415 Unsupported Media Type [IMG]chrome://firebug/content/blank.gif[/IMG] 53ms

Thread Participants: 1