CODEWITHSUNDEEP
htmlblueimpjquery-file-upload
smons
smons

Reputation: 485

jquery file upload plugin- selected file name not being displayed

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>

Upvotes: 14

Views: 9269

Answers (2)

DotSanjay
DotSanjay

Reputation: 216

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

Upvotes: 20

Designer 17
Designer 17

Reputation: 283

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!

Upvotes: 1

Related Questions