1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default filefield not send when form.submit() fire

    filefield not send when form.submit() fire


    I have a problem with uploading a file. I have form with textfield, textarea and filefield inputs. I send this form with function form.submit() to the server. But on server side I see, that only textfield and textarea data are in the request body (filefield is missing). Content-type is multipart/form-data (POST method).

    form:
    Code:
    Ext.define('app.invoiceApproval.UploadForm', {
        extend: 'Ext.window.Window',
    
        requires: [
        ],
    
        buttonAlign: 'center',
        buttons: [
            {
                    text: 'Upload it!',
                itemId: 'upload',
                id: 'uploadButton',
                formBind: true,
                disabled: true
            },
            {
                text: 'Cancel',
                id: 'cancelButton',
                itemId: 'cancel'
            }
        ],
    
        fieldDefaults: {
                    labelAlign: 'left',
                    msgTarget: 'side',
                    xtype: 'textfield'
            },
    
            defaults: {
                    border: false,
                    xtype: 'form',
                    flex: 1,
                    layout: 'anchor'
            },
    
            title: 'Uploading ...',
            modal: true,
        bodyPadding: 10,
        width: 400,
        height: 300,
        layout: 'anchor',
       
        items: [
                {
                    xtype: 'form',
                    layout: 'anchor',
                    flex: 1,
                    isUpload: true,
                    fileUpload: true,
                    items: [
                            {
                                fieldLabel: 'File',
                                xtype: 'filefield',
                                name: 'invoiceFile',
                                id: 'invoiceFile',
                                width: '100%',
                                buttonText: 'Vybrat',
                                allowBlank: false
                            },
                            {
                                fieldLabel: 'VS',
                                xtype: 'textfield',
                                name: 'vs',
                                id: 'vs',
                                width: '100%'
                            },
                            {
                                fieldLabel: 'Note',
                                enableKeyEvents : true,
                                xtype: 'textarea',
                                name: 'note',
                                id: 'note',
                                height: 50,
                                border: 1,
                                width: '100%'
                            }
                    ]
                }
        ],
    
        initComponent: function() {
                    this.callParent(arguments);
            }
    
    });
    controller:

    Code:
    Ext.define('app.invoiceApproval.UploadFormController', {
        extend: 'app.main.AbstractController',
    
    
        model: null,
    
        requires: [
            'app.invoiceApproval.UploadForm'
        ],
    
        title: '',
        evidenceId: 'invoiceApproval',
    
        createView: function() {
                    return Ext.create('app.invoiceApproval.UploadForm', {});
        },
    
        attachLoadRecordListeners: function() {
        },
    
        setupControl: function() {
            this.controlOver({
                'button[itemId="upload"]': {
                    click: this.onUploadFormSave
                },
                'button[itemId="cancel"]': {
                    click: this.onUploadFormCancel
                },
                'filefield[id="invoiceFile"]': {
                    change: this.onFileSelected
                }
    
            });
    
            this.formPanel = this.view.query('form')[0];
        },
    
        onFileSelected: function(fieldfile) {
            Ext.getCmp('uploadButton').enable();
        },
    
        onUploadFormCancel: function(button) {
            this.view.close();
        },
    
        onUploadFormSave: function(button) {
            var me = this;
            var form = this.formPanel.getForm();
            form.submit({
                    url: app.main.settings.api_url+"?action=uploadInvoiceApproval",
                    waitMsg: 'Uploading ...',
                    success: function(fp,o) {
                            Ext.Msg.alert(Success',':)');
                    },
                    failure: function(fp,o) {
                            Ext.Msg.alert('Failure',':(');
                    }
            });
            this.view.close();
        }
    });

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,055
    Vote Rating
    69
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    Your form has some configurations I don't recognize like fileUpload and isUpload. In which version of ExtJS are you seeing this, and which browser?


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    This options are for testing only. I found this options on some forums, but no result. I am testing my app on Firefox 29, Safari 7.0.3.

    Extjs is 4.1

  4. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,055
    Vote Rating
    69
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    Can you check (using Firebug) to see what the browser is sending to the server?


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    Headers:

    Code:
    User-Agent:    Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0
    Referer:    https://myapp.domain.tld/
    Host:    api.myapp.domain.tld
    Connection:    keep-alive
    Accept-Language:    cs,en-us;q=0.7,en;q=0.3
    Accept-Encoding:    gzip, deflate
    Accept:    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Request:

    Code:
    Content-Type: multipart/form-data; boundary=---------------------------7961414811926750357987336986 Content-Length: 289 -----------------------------7961414811926750357987336986 Content-Disposition: form-data; name="vs" vsdata -----------------------------7961414811926750357987336986 Content-Disposition: form-data; name="note" notedata -----------------------------7961414811926750357987336986--

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    Still not working

    Can be a problem in the fact, that I have a filefield in Ext.window.Window (example has Ext.form.Panel)?

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      1  

    Default


    Solved this.view.close(); moved to success / failure function. The view was closed before file was sent to server.

Thread Participants: 1