CODEWITHSUNDEEP
jquerycodeigniterjquery-file-upload
Jenz
Jenz

Reputation: 8367

Get the name of input file once the file is chosen

What I want is on clicking a link, the file upload should be triggered and on selecting the file, on place of the link, the name of the uploaded file should appear. And on clicking a button the form should be submitted.

I am able to trigger the file upload. But failed to retrieve its name the same time.

JQuery:

$(document).ready(function()
{
    $('#uploadFile').click(function(e){
      $('#fileUploadField').click();
      e.preventDefault();
      $('#uploadFile').html($('input[type=file]').val());
     });
});

Form (I am using Codeigniter):

<?php echo form_open("member/uploadphoto","id='photoform'")?>
<a href="#" id="uploadFile">Upload File</a>
<input type="file" name="file" id="fileUploadField" />
<input type="submit" value="Upload">
<?php echo form_close();?>

and in CSS:

#fileUploadField{
    opacity: 0;
}

So, now on clicking the link Upload File, the file upload pop up is coming. But I am not able to show the name of the uploaded file (like in normal file upload).

Please help me to solve this. Thanks in advance.

Upvotes: 0

Views: 437

Answers (2)

putvande
putvande

Reputation: 15213

When you click the a tag you open the browse window and already set the value of the file input, which hasn't been filled yet. You need to wait for a file to be picked. You can do that with on('change'):

$(document).ready(function () {
    $('#uploadFile').click(function (e) {
        $('#fileUploadField').click();
    });
    $('#fileUploadField').on('change', function () {
        $('#uploadFile').html($('input[type=file]').val());
    });
});

See Fiddle

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

$(document).ready(function () {
    $('#uploadFile').click(function (e) {
        $('#fileUploadField').click();
        e.preventDefault();
    });
    $('#fileUploadField').change(function () {
        $('#uploadFile').text(this.value);
    });
});

Upvotes: 2

Related Questions