Bootstrap Filestyle - Changing button text for file field doesn't work

Question

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();

Markus Kottländer · Accepted Answer · 2014-11-08T13:41:54.250

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

edited Nov 08 '14 at 13:41

answered Nov 08 '14 at 13:24

Markus Kottländer

8,228
4
37
61

Thank you, next time i should read documentation more carefully – Matt Nov 08 '14 at 13:36
1

I think the way you described it, it should work but in your fiddle you don't change the value on or after initiating filestyle on the button field like in my second fiddle (the way you described). But this still doesn't work as supposed... :P – Markus Kottländer Nov 08 '14 at 13:39
In Matt's defence, while he wasn't passing in an object, the docs are wrong. Thankfully I came upon this post with this answer. The docs say to use `{text: 'Some Text'}`. but Markus' answer helped save me tons of time. – Int'l Man Of Coding Mystery Jan 24 '19 at 16:10

score 0 · Answer 2 · edited May 09 '22 at 17:11

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"
    });
});

Bootstrap Filestyle - Changing button text for file field doesn't work

2 Answers2