How To Change "choose File" Text Using Bootstrap 5

January 31, 2024 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-buttoninput[type=file] {
  margin-left: -2px!important;
}

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

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

.custom-file-button:hoverlabel {
  background-color: #dde0e3;
  cursor: pointer;
}

<divclass="container py-3"><divclass="input-group custom-file-button"><labelclass="input-group-text"for="inputGroupFile">Your Custom Text</label><inputtype="file"class="form-control"id="inputGroupFile"></div></div><linkhref="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;
}

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"><divclass="container min-vh-100 py-2"><divclass="row"><divclass="col"><divclass="mb-3"><inputclass="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:

<linkrel="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><divclass='input-group'><labelclass='input-group-prepend'><divclass='input-group-text form-control'for='file-input-thing'>Pick File</div></div><inputtype='file'id='file-input-thing'style='width:0;'><labelid='file-input-label'class='form-control'for='file-input-thing'/></div><p>Label after</p><divclass='input-group'><labelid='file-input-label'class='form-control'for='file-input-thing'/><inputtype='file'id='file-input-thing'style='width:0;'><divclass='input-group-append'><labelclass='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()}>ChooseImage</Button>
<inputclassName="form-control d-none"id='imageFileSelect'type="file"onChange={imageSelected}></input>

Html5 Ready