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>

webster · Accepted Answer · 2015-07-01 06:11:10Z

20

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

edited Jul 1, 2015 at 6:11

webster

4,0326 gold badges41 silver badges61 bronze badges

answered Mar 23, 2015 at 8:11

DotSanjay

2162 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ted Avery Over a year ago

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

whossname Over a year ago

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

Designer 17 · Accepted Answer · 2014-01-08 18:17:22Z

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!

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

Collectives™ on Stack Overflow

jquery file upload plugin- selected file name not being displayed

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related