How to customize input type file button in Bootstrap

Question

I was working on a simple form where I need to have a button to upload some file. I am using bootstrap, I found that the typical way of making an input field of type file and assigning it classes like btn btn-success is not working as the way I wanted.

Cod:-

<label> Upload File : </label>
<input type="file" class=" btn btn-success form-control required" id="file" name="file" ng-model="Form.file" required>

The output of the following code is looking like -

I don't want the button to have this ugly text over "ChooseFile" No file chosen. How can I make it normal button with a text over "Upload" with the same functionality.

score 0 · Answer 1 · answered Sep 13 '21 at 10:09

0

For upload control beautification, I would suggest you to use Dropify for form control and it is useful enough if you wish to do some validation.

answered Sep 13 '21 at 10:09

Esther123

59
7

Thank you, but dose that mean there is no way to do it in bootstrap only ? – Amara Sep 13 '21 at 11:17
You may refer to this example. https://stackoverflow.com/a/9546968/15764591 – Esther123 Sep 15 '21 at 06:08

How to customize input type file button in Bootstrap

1 Answers1