EXTJS 4 UPLOAD TO ASP.NET MVC DEMO

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()
    });
});