I'm trying to upload a file from an ExtJS 4.2 front-end to a C#/ASP.net MVC 2 backend. My front end code is largely modeled upon that from the ExtJS docs at: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.File. After the file is chosen and the upload button is clicked a request status of 200 ensues and a server side round trip is successfully made, but the server side code indicates that Request.Files["file"] is null.
Using Chrome dev tools it is apparent that a file upload is being attempted but there is no content between the boundaries:
------WebKitFormBoundaryh2Q8Ya8kWQkiSLOb
Content-Disposition: form-data; name="users"; filename="0_USER_INFO.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
------WebKitFormBoundaryh2Q8Ya8kWQkiSLOb--
Below are relevant portions of my client and server side code. Currently when I click upload I get an ExtJS alert with header of "Failure" and msg of "postedFile == null" (see case Ext.form.action.Action.SERVER_INVALID). What can I do to ensure the file contents actually get sent and that Request.Files["file"] on the server side is not null?
CLIENT SIDE CODE:
Ext.define('Tools.view.users.Manager', {
extend: 'Ext.tab.Panel',
alias: 'widget.usermanager',
title: 'User Manager',
items: [{
title: 'Import',
items: [{
xtype: 'form',
width: 400,
bodyPadding: 10,
//frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'users',
fieldLabel: 'New Users',
labelWidth: 75,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'From Excel'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/User/Upload',
waitMsg: 'Uploading user data...',
success: function (form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
}
}
}]
}]
}]
});
SERVER SIDE:
public class UserController : Controller
{
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload()
{
HttpPostedFileBase postedFile = Request.Files["file"];
if (postedFile == null)
{
return Content("{\"success\": false, \"msg\": \"postedFile == null\"}");
}
else
{
return Content("{\"success\": true, \"msg\": \"postedFile != null\"}");
}
}
