How To Change "Choose File" Text Using Bootstrap 5

August 17, 2022 Post a Comment

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'?

Solution 1:

Bootstrap 5 + some CSS

Compose Bootstrap's custom file input with custom label.
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.
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  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

Solution 2:

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  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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 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:

Baca Juga

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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:

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>

Code Html5