ExtJs 4: Multiple File Upload

Result

Do you know?

C# Code

[HttpPost]
public ActionResult Upload(FormCollection form)
{
    if (Request.Files.Count == 0) return Content("no files");

    var file = Request.Files[0];
    var id = Guid.NewGuid();

    if (file != null && file.ContentLength > 0)
    {
        var path = GetPath(id);

        file.SaveAs(path);
    }

    return Content(id.ToString());
}
    

Js Code

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': '/scripts/ext/ext-4.1.1/ux'
    }
});

Ext.onReady(function () {
    var upload = Ext.create('Ext.ux.multiupload.Panel', {
        title: 'Upload',
        width: 600,
        height: 300,
        frame: true,
        uploadConfig: {
            uploadUrl: '/postdata/upload',
            maxFileSize: 4 * 1024 * 1024,
            maxQueueLength: 5
        },
        renderTo: 'output'
    });
    var images = Ext.create('Ext.grid.Panel', {
        title: 'Images',
        width: 600,
        height: 300,
        frame: true,
        margin: '5 0 0',
        store: {
            fields: ['id']
        },
        columns: [
            { header: 'Id', dataIndex: 'id', width: 250 },
            {
                header: 'Image',
                dataIndex: 'id',
                width: 120,
                align: 'center',
                sortable: false,
                renderer: function (v) {
                    return Ext.String.format('<img src="/postdata/thumb/{0}" />', v);
                }
            }
        ],
        renderTo: 'output'
    });

    upload.on('fileuploadcomplete', function (id) {
        images.store.add({
            id: id
        });
    });
});