Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 631
smons Avatar asked Aug 12 '13 20:08

smons


2 Answers

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

like image 64
DotSanjay Avatar answered Nov 15 '22 22:11

DotSanjay


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!

like image 41
Designer 17 Avatar answered Nov 15 '22 22:11

Designer 17