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>

Nought

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

Bingo

Thanks, this is correct. The key property is replaceFileInput: false for anyone wondering. – Glimmer

this answer could be improved by stating the important bit is the "replaceFileInput: false" and then providing the example code. – Breadstuff

Answer 2

If I understand you correctly, you're wanting to be able to select your files and then have their names display on your screen ... If this is the case you should try something like this:

HTML:

<!--Don't forget to wrap your form elements inside a form-->
<input id="fileupload" type="file" name="files" />

<ul id="selected-files">
    <!--File names will be displayed here-->
</ul>

<div id="progress" style="width: 250px">
    <div class="bar" style="width: 0%;"></div>
</div>

It looks like you've got most of your script working (based off what you said); so we'll only be changing a few things. First, we'll be moving the data.file command (after tweaking it) into the add: function instead ... next, we'll create a few custom vars to display the file names with some order (and be able to style them easier).

Script:

$(function () {

    var ul = $('#selected-files');

    $('#fileupload').fileupload({
        dataType: 'json',
        url: '@Url.Action("Index", "Home")',

         add: function (e, data) {
             var selectedFiles = $('<li class="file-name"><p></p></li>');
             selectedFiles.find('p').text(data.files[0].name);
             data.context = selectedFiles.appendTo(ul);

             data.submit(); 
         },

         progress: function (e, data) {
             var progress = parseInt(data.loaded / data.total * 100, 10);
             $('#progress .bar').css('width', progress + '%');
         }

         //multipart: false

     });               

});

I must admit I wouldn't have figured this out on my own ... thanks to Martin Angelov's tutorial on uploading files using blueimp's jquery-file-upload plugin. ;)

I hope this helps!

Tropine

Thank you for your time. We ended up creating our own plugin. – Nought