xtype filefield doesn't send value

[lobosan]

Hi,

I'm working with a form panel and two of the fields are xtype "filefield", here is the code

Ext.define('sisconse.view.ui.Anexos', {
    extend: 'Ext.form.FieldSet',

    height: 100,
    id: 'Anexos',
    width: 1230,
    layout: {
        type: 'absolute'
    },
    title: 'VII ANEXO FOTOGRAFICO Y/O CROQUIS',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'filefield',
                    width: 410,
                    inputId: 'AnFotografia',
                    name: 'ruta',
                    fieldLabel: 'FOTOGRAFIA',
                    labelAlign: 'right',
                    buttonText: 'Buscar...',
                    x: -6,
                    y: 0
                },
                {
                    xtype: 'filefield',
                    width: 410,
                    inputId: 'AnCroquis',
                    name: 'con_path',
                    fieldLabel: 'CROQUIS',
                    labelAlign: 'right',
                    buttonText: 'Buscar...',
                    x: -6,
                    y: 30
                }
            ]
        });

        me.callParent(arguments);
    }
});

And when i choose an image and then clic on the save button to send the data to the server the input "ruta" sends "" (nothing)

What i'm doing wrong? or this is a bug?

[skirtle]

I doubt it's a bug.

You haven't included the code for performing the save but I suspect that's where your problem lies.

Some relevant docs:

http://docs.sencha.com/ext-js/4-0/#!...orm.field.File
http://docs.sencha.com/ext-js/4-0/#!...ata.Connection
http://docs.sencha.com/ext-js/4-0/#!...thod-hasUpload

[lobosan]

I doubt it's a bug.

You haven't included the code for performing the save but I suspect that's where your problem lies.

Some relevant docs:

http://docs.sencha.com/ext-js/4-0/#!...orm.field.File
http://docs.sencha.com/ext-js/4-0/#!...ata.Connection
http://docs.sencha.com/ext-js/4-0/#!...thod-hasUpload

Hi skirtle, here is the code to save

Ext.define('sisconse.view.BtnGuardar', {
    extend: 'sisconse.view.ui.BtnGuardar',
    alias: 'widget.btnguardar',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);

        me.on('click', function() {
            var form = this.up('form').getForm();
            var record = form.getRecord();
            if(form.isValid()) {
                form.updateRecord(record);
                record.save({
                    success: function(idficha) {
                        Ext.Msg.alert('Éxito', 'Ficha guardada exitosamente.')
                    },
                    failure: function(idficha) {
                        Ext.Msg.alert('Error', 'Hubo un error al guardar los datos.')
                        //Ext.Msg.alert("Failed", operation.request.scope.reader.jsonData["message"]);
                    }
                });
            } else {
                Ext.Msg.alert('Datos no válidos', 'Por favor corrija los errores.')
            }
        });
    }
});

And the model and proxy of the form

Ext.define('sisconse.view.FichaSenagua', {
    extend: 'sisconse.view.ui.FichaSenagua',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);

        Ext.define('Ficha', {
            extend: 'Ext.data.Model',
            fields: ['con_id', 'con_path', 'ruta'],
            proxy: {
                type: 'ajax',
                api: {
                    read: 'app/data/loadform.php',
                    create: 'app/data/updateform.php',
                    update: 'app/data/updateform.php'
                },
                reader: {
                    type: 'json',
                    root: 'data'
                },
                writer: {
                    type: 'json',
                    root: 'data',
                    encode: true
                }
            }
        });

        var numficha = Ext.urlDecode(window.location.search.substring("ficha"));

        Ext.ModelMgr.getModel('Ficha').load(numficha, {
            waitMsg: 'Cargando...',
            success: function(idficha) {
                me.getForm().loadRecord(idficha);
            }
        });
    }
});

[skirtle]

Well that confirms my theory. There's no way that'll work. You have to use a form to submit it. Have a read of the docs I suggested. There's a limit to what ExtJS can do to shield you from the horrors of file uploads, I suggest you read some online guides to how they work more generally.

[lobosan]

Well that confirms my theory. There's no way that'll work. You have to use a form to submit it. Have a read of the docs I suggested. There's a limit to what ExtJS can do to shield you from the horrors of file uploads, I suggest you read some online guides to how they work more generally.

If i understood, the problem is i'm sending the data by ajax, and using the save() method, so the posible solution could be make this with form.submit()???

Please let me know if this could be the solution

[skirtle]

Yes, submitting the form is the way to do it.

The Ajax request is not the only reason your existing code won't work. When you call updateRecord it'll be losing the file information, there's no way to copy the filefield contents to a record. Filefields really are problematic, pretty much all you can with them is submit them as part of a form.