ExtJS File Upload Woes

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:fakepathsomefile.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.

---

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!

---

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.

链接地址: http://www.djcxy.com/p/76394.html

上一篇: EXTJS 4控制视图问题

下一篇: ExtJS文件上传Woes