I would like to change button text for file field in Bootstrap Filestyle plugin in Bootstrap 2.3.2, but it doesn't work and text of button is still default. I create file field by replacing element in jquery and tried to set text by attribute data-buttonText or method $("#changeAccountsSourceModal :file").filestyle('buttonText', 'Choose address');

jsfiddle sample

File field

$("#changeAccountsSourceModal .form-horizontal").replaceWith("<input type=\"file\" class=\"filestyle\" data-input=\"true\" data-buttonText=\"Choose address\">");

$("#changeAccountsSourceModal :file").filestyle();

I would like to change button text for file field in Bootstrap Filestyle plugin in Bootstrap 2.3.2, but it doesn't work and text of button is still default. I create file field by replacing element in jquery and tried to set text by attribute data-buttonText or method $("#changeAccountsSourceModal :file").filestyle('buttonText', 'Choose address');

jsfiddle sample

File field

$("#changeAccountsSourceModal .form-horizontal").replaceWith("<input type=\"file\" class=\"filestyle\" data-input=\"true\" data-buttonText=\"Choose address\">");

$("#changeAccountsSourceModal :file").filestyle();

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-2
• bootstrap-file-upload

Share Improve this question Follow asked Nov 8, 2014 at 13:13 MattMatt 8,9923535 gold badges133133 silver badges242242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Just tried it out by passing the option in an object on initiating filestyle, works.

$("#changeAccountsSourceModal :file").filestyle({buttonText: 'Choose address'});

Ironically when you try to change the vaule afterwords the text just gets added to the button.

$("#changeAccountsSourceModal :file").filestyle('buttonText', 'Choose address');

fiddle

working fiddle

You can change button text, remove icon, placeholder and more

$(document).ready(function () {
    $("#myInputId").fileinput({
        mainClass: "input-group-md",
        showUpload: false,
        previewFileType: "image",
        browseClass: "btn btn-sucess",
        browseLabel: "Select Photo",
        browseIcon: "<i class=\"icon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Delete",
        removeIcon: "<i class=\"icon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Upload",
        uploadIcon: "<i class=\"icon-upload\"></i> ",
        msgPlaceholder: "Select Photo"
    });
});