jquery file upload plugin- selected file name not being displayed

Question

I am using jquery file upload plugin(basic) to upload single file at a time. Plugin works fine and i can see files dumped in the correct directory, all good! However when i select a file, the name(Chrome)/path(IE) of the selected file is not displayed, instead it just displays "No file chosen". How can i change it to display the name of the selected file? My code:

Script :

$(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '@Url.Action("Index", "Home")',
                add: function (e, data) {
                    data.submit(); 
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css('width', progress + '%');

                },
                done: function (e, data) {
                    $('<p/>').text(data.files[0].name).appendTo(document.body);                        
                }
                //multipart: false
            });               

        });

HomeController :

[HttpPost]
    public ActionResult Index(HttpPostedFileBase files)
    {           
        return Json(files.FileName);
    }    

Index :

<input id="fileupload" type="file"  name="files"/>
<div id="progress" style="width: 250px">
    <div class="bar" style="width: 0%;"></div>
</div>

Answer 1

Pass the following arguments to the fileupload call:

$('#fileupload').fileupload({

    formData:{extra:1},
    autoUpload: false,
    url: "uploader.php",
    replaceFileInput:false,
    fileInput: $("input:file")
});

replaceFileInput:false is for displaying the selected file name