Note: server response type should be "text/html".
RESULT
C# CODE
[HttpPost]
public ActionResult File()
{
if (Request.Files.Count == 1)
{
var file = Request.Files["file"];
if (file != null)
{
var size = file.ContentLength;
var name = System.IO.Path.GetFileName(file.FileName);
if (size > 0)
{
if (size <= 2 * 1024 * 1024)
{
return Json(new
{
success = true,
msg = "Your file has been uploaded",
data = new
{
name, size
}
}, "text/html");
}
return Json(new
{
success = false,
msg = "Your file is too large"
}, "text/html");
}
}
}
return Json(new
{
success = false,
msg = "Select file to upload"
}, "text/html");
}
JS CODE
Ext.onReady(function () {
Ext.widget('form', {
title: 'Upload Demo',
width: 400,
bodyPadding: 10,
items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/upload/file',
waitMsg: 'Uploading your file...',
success: function (f, a) {
var result = a.result,
data = result.data,
name = data.name,
size = data.size,
message = Ext.String.format('<b>Message:</b> {0}<br>' +
'<b>FileName:</b> {1}<br>' +
'<b>FileSize:</b> {2} bytes',
result.msg, name, size);
Ext.Msg.alert('Success', message);
},
failure: function (f, a) {
Ext.Msg.alert('Failure', a.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
});