'How to change "Choose file" text using Bootstrap 5

Is it impossible change choose file text of input file in Bootstrap 5 using CSS like Bootstrap 4?

And how can I add a margin to "No file chosen"?

enter image description here

htmlcssfile-uploadbootstrap-5


Solution 1:[1]

Bootstrap 5 beta no longer provides a custom file input like Bootstrap 4 that used pseudo elements to override the browser's file input defaults. Therefore you'd have to use JS or make your own psuedo element to hide the Choose file.. area of the input...

#formFile::before {
  content: "Pick file";
  position: absolute;
  z-index: 2;
  display: block;
  background-color: #eee;
  width: 80px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container min-vh-100 py-2">
  <div class="row">
    <div class="col">
      <div class="mb-3">
        <input class="form-control" type="file" id="formFile">
      </div>
    </div>
  </div>
</div>

Solution 2:[2]

Bootstrap 5 + some CSS

  1. Compose Bootstrap's custom file input with custom label.
  2. Hide default Choose file button with the ::file-selector-button pseudo-element. There are pseudo-elements ::-webkit-file-upload-button and ::-ms-browse for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css uses ::file-selector-button and ::-webkit-file-upload-button only. So I propose to do the same.
  3. Add some more CSS for the :hover effect and for the thin border between the label and the input field.

Tested in Chrome, Firefox and Edge.

https://codepen.io/glebkema/pen/VwMQWGE

.custom-file-button input[type=file] {
  margin-left: -2px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}

.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.custom-file-button:hover label {
  background-color: #dde0e3;
  cursor: pointer;
}
<div class="container py-3">

  <div class="input-group custom-file-button">
    <label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
    <input type="file" class="form-control" id="inputGroupFile">
  </div>

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

Solution 3:[3]

I created an input group with a label, the input, and then appended another label. This way you can style it however you want and put custom text as the input group text. You then hide the input element (display:none or width:0 or something)

Examples:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<p>Label before</p>

<div class='input-group'>
  <label class='input-group-prepend'>
    <div class='input-group-text form-control' for='file-input-thing'>Pick File</div>
  </div>
  <input type='file' id='file-input-thing' style='width:0;'>
  <label id='file-input-label' class='form-control' for='file-input-thing'/>
</div>

<p>Label after</p>

<div class='input-group'>
  <label id='file-input-label' class='form-control' for='file-input-thing'/>
  <input type='file' id='file-input-thing' style='width:0;'>
  <div class='input-group-append'>
    <label class='input-group-text form-control' for='file-input-thing'>
  </div>
</div>

You can then assign styling to labels as you see fit. By making both piece labels tied into the input element it allows you to click on either and choose a file. Further you can add an ID to the blank label and update the value to the name of the file.

let inputElement = document.getElementById('file-input-thing');
let inputLabel= document.getElementById('file-input-label');

inputElement.addEventListener('change', function(e) {
  let file = e.target.files[0];
  inputLabel.innerHTML = file.name;
})

I'm new to all this so there's probably a better solution, but this worked for me.

Solution 4:[4]

This is how I have implemented it, just copy-paste it to your code and you'll see the results

<Button onClick={() => document.getElementById('imageFileSelect').click()}>Choose Image</Button>
<input className="form-control d-none"  id='imageFileSelect' type="file" onChange={imageSelected}></input>

Solution 5:[5]

If the file input is placed inside the label element and then hidden the label itself will act as the file input when it is clicked. Adding the form-control class and the tabindex attribute (which specifies that the element can be focused) to the label will then style it like a generic Bootstrap input.

<div class="input-group">
  <span class="input-group-text">Custom Add-on Text</span>
  <label class="form-control" tabindex="0">Custom Input Text
    <input type="file" class="invisible">
  </label>
</div>

https://codepen.io/yetiface/pen/PoQqrda

This solution has its downsides, for example the label element will not automatically receive bootstrap styles specifically for input[type='file']. However it is such a simple method that I felt it worth posting for those who it can help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood
Solution 2
Solution 3 isherwood
Solution 4
Solution 5

Related Questions