3

Input type file of Bootstrap 5 is too simple. https://getbootstrap.com/docs/5.1/forms/form-control/#file-input

file input bootstrap 5

I have 3 questions:

  1. Is possible move "Choose file" button to right?
  2. Is possible change "No files selected" message?
  3. Is possible change "Choose file" message?

Using Bootstrap 4 that is possible: https://getbootstrap.com/docs/4.6/components/input-group/#custom-file-input

Thank you!

isherwood
  • 58,414
  • 16
  • 114
  • 157
FeKuLa
  • 356
  • 2
  • 10
  • 24
  • Answered here: https://stackoverflow.com/questions/65770908/how-to-change-choose-file-text-bootstrap-5 – VikingBlooded Dec 22 '21 at 22:43
  • @VikingBlooded, not really. Those solutions are incomplete at best and can require JavaScript. That's a far cry from what Bootstrap 4 offered. – isherwood Dec 22 '21 at 22:45
  • 1
    Yes, it seems possible, but you have to create or customize your own CSS classes for that. I have played a few [here](https://jsfiddle.net/9td7sa3g/1/) just copying some parts of the old bt4 `custom-file` class, but it requires a lot of more work to do in order to be fully compatible in all circunstances, like inside input-group, etc... – masterguru Dec 23 '21 at 20:34
  • @masterguru I think yours is the best answer. I tried it and it worked and showed right. I was searching for this in a lot of sites and all the examples was wrong formatted because of: 1. not showing right position with german language settings or 2. not looking like a bootstrap-control would look like. Or the answers used javascript and this was not what I was looking for – Mayra Delgado Sep 07 '22 at 13:31

1 Answers1

2

I did not find a solution using original Bootstrap entry. However, I used some tricks and made it just like I changed the text of file input form. I will use the sample you gave to show how I did it.

This is a input form from form-control of Bootstrap Docs. Code is this:

    <div class="mb-3">
      <label for="formFile" class="form-label">Default file input example</label>
      <input class="form-control" type="file" id="formFile">
    </div>

The thought is to replace file input tag with text input tag, and use Javascript to bind file input form action.

    
<!-- use online bootstrap resource -->   
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="mb-3">
  <label for="file_input_id" class="form-label">Default file input example</label>
                  
  <!-- use opacity and height style to hide file input form -->
  <input class="form-control" type="file" id="file_input_id" style="opacity:0;height:0;">
                  

  <!-- use another text input group to replace file input form -->
  <div class="input-group mb-3">
    <span class="input-group-text" id="text_input_span_id">Any text here</span>

    <!-- use 'caret-color: transparent' to hide input cursor, set autocomplete to off to remove possible input hint -->
    <input type="text" id='text_input_id' class="form-control" placeholder="Another text here" style="caret-color: transparent" autocomplete="off">
  </div>
</div>

<!-- use online jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // bind file-input-form click action to text-input-span
  $('#text_input_span_id').click(function () {
    $("#file_input_id").trigger('click');
  })
  // bind file-input-form click action to text-input-form
  $('#text_input_id').click(function () {
    $("#file_input_id").trigger('click');
  })
  // display file name in text-input-form    
  $("#file_input_id").change(function () {            
    $('#text_input_id').val(this.value.replace(/C:\\fakepath\\/i, ''))
  })
</script>

Click the input form and choose a file, it works! choose file

If you want to change the button to the right, just change the order of span and input tags.

SteveHu
  • 82
  • 9