Handling ExtJs 'fileuploadfield' on the server using ASP.NET MVC?

I have a simple ExtJs form panel which contains a fileuploadfield. When I submit the form to the server all the key value form values get sent to the server but not the key value pair for the file upload field. Does anyone know why this is? (I have attached some code snippets below)

Also how do I handle the upload on the server. i.e. I want to upload an image to the server process it and save it somewhere on the server?

public JsonResult SetEmployeeDetails(strin开发者_如何学JAVAg firstname, string photopath)
    {
        GetData data = delegate
        {
            return Repo.SetEmployeeDetails(firstname, photopath);
        };
        JsonResultBase jsonResult = GetJsonResult(data);
        JsonResult json = PortalJsonResult(jsonResult, JsonRequestBehavior.AllowGet);
        return json;
    }



xtype: 'form',
title: 'Employee Setup',
items: [{
            fieldLabel: 'Firstname',
            xtype: 'textfield',
            name: 'firstname',
            maxLength: 10,
            allowBlank:false
        },
        {
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photopath',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
        }],
buttons: [{
    text: 'Save',
    scope: this,
    handler: function(){
        var form = this.items.items[0].getForm();
        if(form.isValid()){
            form.submit({
                url: 'EmployeeDetails/SetEmployeeDetails',
                waitMsg: 'Saving your details...',
                success: function(fp, o){
                    msg('Success', 'Processed file on the server');
                }
            });
        }
    }
}]

You cannot get the file method parameters. So, your photopath variable will be usually null. To access the file uploaded, you can do the following:

HttpPostedFileBase postedFile = Request.Files["fileinput"];
if (postedFile != null)
{
   //process the file content using postedFile.InputStream...
}

And in the javascript you need to add fileUpload: true, to your form config so that ExtJS knows you are uploading a file in the form.

Had a similar problem. Found out that you need to set the content type to "text/html" on the page that handles the file upload. :-(

Response.ContentType = "text/html";

If you read the documentation for Ext.data.Connection, you will see that

The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

Took me a while to find this, but as I came across your question, someone else might do to with a similar problem!

hopefully this will help them!