Change input file title using bootstrap File Input with jquery

Question

I'm working on a process that update a picture with bootstrap file input, everything works fine but i can not achieve change the title of the input file after the process was finished.

For those who don't know bootstrap file input, when the file was choseen the name of the file takes the title of the input file.

I try:

$("#userPicture").prop('title', 'Select picture...');

and:

$("#userPicture").attr('title', 'Select picture...');

But neither of both works.

This is the container:

<form method="post" id="fileinfo" name="fileinfo" class="form-horizontal" onsubmit="return submitForm();" role="form">
    <input type="file" id="userPicture" name="userPicture" title="Select picture..." class="btn btn-primary  btn-xs" data-filename-placement="inside"><br><br>
    <div style="display:inline-block;">
        <button type="button" class="btn btn-success btn-block btn-xs" style="width:80px;" id="pictureSave">Save</button>
    </div>
    <div style="display:inline-block;">
        <div id='loadingmessage' style="font-family: 'Open Sans', sans-serif;font-size:12px;display:none" align="center">&nbsp;&nbsp;<img src="img/loader.gif"></div>
    </div>
</form>

This is the function:

$(document).on('click','#pictureSave',function() {
    var studentPicture = $("#userPicture").val();
    var studentId = $("#studentId").val();
    if (studentPicture === "") {
        $("#pictureResponse").html('<p class="text-danger">You must to select a picture.</p>');
    } else {        
        $('#loadingmessage').show();
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("action", "changeStudentPicture");
        fd.append("studentId", studentId);
        $.ajax({
          url: "content/studentsAction.php",
          type: "POST",
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,
          contentType: false
        }).done(function(data) {
            if (data != "Successful") {
                $('#loadingmessage').hide();
                $("#pictureResponse").html('<p class="text-danger">'+data+'</p>');
            } else {
                $('#loadingmessage').hide();
                $("#userPicture").prop('title', 'Select picture...'); //Here is the issue
                $("#pictureResponse").html('<p class="text-success">The picture was updated successfully.</p>');
            }
        }); 
    }
});

For your information, i found the solution analyzing the bootstrap.file-input.js

$(".file-input-wrapper input[type=file]").siblings('span').html('Select picture');

as far as i know this can not be changed. You would have to use css to completely restyle this button after killing the look — jmore009, Dec 31 '14 at 05:17
try this $('#userPicture').attr('data-original-title', 'Select picture...');but i am not sure — SimarjeetSingh Panghlia, Dec 31 '14 at 05:22
[Similar to this](http://stackoverflow.com/questions/16001586/change-the-no-file-chosen) — anpsmn, Dec 31 '14 at 05:35

score 0 · Answer 1 · answered Dec 31 '14 at 05:22

0

This may seem like a stupid answer, but have you tried plain JavaScript?

document.querySelector("#userPicture").setAttribute( "title" , "Select picture.." );

Anyway, sorry if it doesn't work :)

answered Dec 31 '14 at 05:22

undefined

3,949
4
26
38

score 0 · Answer 2 · answered Feb 01 '15 at 13:59

Inspect the html code once you have uploaded the file. Most likely it's not the title attribute that you have to replace, but the innerHTML (or html("") with jQuery).

Sample:

<div class="file-caption-name" title="DOC_TITLE.docx"><span class="glyphicon glyphicon-file kv-caption-icon"></span>DOC_TITLE.docx</div>

See where there's a duplicate 'DOC_TITLE.docx' after </span>?

That's the piece you have to replace. Do that the following way in your js:

$('.file-caption-name').html("<span class="glyphicon glyphicon-file kv-caption-icon"></span>Whatever caption you want.docx");

Change input file title using bootstrap File Input with jquery

2 Answers2