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(string 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:
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.