ExtJS File Upload Woes

Question

ExtJS Version : 4.1.0

Answered - See my response below... quite silly really

I have a simple form with a few fields, one of them being of the xtype fileuploadfield . I listen for the click event on my form's save button in the Controller's this.control method. When the click event occurs, I run a method saveForm , which looks like this:

saveForm: function(button) {
    /** Get the Window Object and retrieve the Form*/
    var currentWin = button.up('window'),
                form = currentWin.down('form');

    /** Get the Form Object */
    form = form.getForm();

    /** ...continued... */
}

At this point in my method, I can console.log the form object, inspect the object's _fields and see my fileuploadfield and the path of the file I input in the field (ie C:\\fakepath\\somefile.png). I can also perform form.getField('upload-field-id'); to get the upload field element. The method form.hasUpload() returns TRUE .

The kicker is that when I call form.submit() and var_dump() the $_FILES array on my server, it is empty!

In the examples that I've seen of file uploading in ExtJS, the form submission happens via a handler function on the Save button in the view. As I like to keep logic for handling button presses in my controller, I'm hoping this is not my only option!

Any input would be greatly appreciated, thank you for your time.

Answer 1

This is most certainly a server side issue. ExtJS makes use of hidden components to submit a multipart form to the server. This indeed works as described in the guides, examples, and docs.

I am unfamiliar with var dump function you refer to above, but you need to make certain that your server side component is handling the multipart form submission correctly.

Answer 2

I feel a bit silly, but the problem was pertaining to retrieving the form object from the button passed to my saveForm method.

Corrected:

In my ExtJS controller...

saveForm: function(button)
{
    var currentWindow = button.up('window');
/** var form          = button.down('form').getForm(); **INCORRECT** */
    var form          = button.up('form').getForm(); /** this is correct */

        form.submit({
            url     : '/service/form/upload/format/json',
            waitMsg : 'Uploading....',
            success : function(form,o) {
                alert(o.response.responseText);
            },
            failure: function(form, action)
            {
                console.error('form, action', form,action);
                alert('failure');
            }
        });
}

In my back-end (Zend), my controller action is simply:

public function uploadAction()
{
    var_dump($_FILES);
    this->view->success = false;
}

As expected, my Chrome Inspector outputs the following upon clicking the save button:

Uncaught Ext.JSON.decode(): You're trying to decode an invalid JSON String:
 {"success":false}array(1) {
  ["file-upload-field"]=>
  array(5) {
    ["name"]=>
    string(29) "TestImage.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(14) "/tmp/php7XfeLD"
    ["error"]=>
    int(0)
    ["size"]=>
    int(89799)
  }
}

The server has successfully received the file upload!