Wsrtjtyk

I am struggling with bootstrap 4 file browser. If I use custom-file-control I will see Choose file value all the time.
https://v4-alpha.getbootstrap.com/components/forms/#file-browser

I would like to change the value of choose file after the file has been chosen. This value is actually hidden in css .custom-file-control:lang(en)::after and I do not know how to access and change it in javascript. I can get the value of chosen file like this:

document.getElementById("exampleInputFile").value.split("\").pop();

not I need to change

.custom-file-control:lang(en)::after {

    content: "Choose file...";

}

somehow

link: http://codepen.io/Matoo125/pen/LWobNp

Updated 2018

Bootstrap 4.1

Now the "Choose file..." placeholder text is set in the custom-file-label:

<div class="custom-file" id="customFile" lang="es">

        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">

        <label class="custom-file-label" for="exampleInputFile">

           Select file...

        </label>

</div>

Changing the "Browse" button text requires a little extra CSS or SASS.

.custom-file-input ~ .custom-file-label::after {

    content: "Button Text";

}

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

Also notice how language translation works using the lang="" attribute.

Bootstrap 4 Alpha 6

I think there are 2 separate issues here..

<label class="custom-file" id="customFile">

        <input type="file" class="custom-file-input">

        <span class="custom-file-control form-control-file"></span>

</label>

1 - How the change the initial placeholder and button text

In Bootstrap 4, the initial placeholder value is set on the custom-file-control with a CSS pseudo ::after element based on the HTML language. The initial file button (which isn't really a button but looks like one) is set with a CSS pseudo ::before element. These values can be overridden with CSS..

#customFile .custom-file-control:lang(en)::after {

  content: "Select file...";

}



#customFile .custom-file-control:lang(en)::before {

  content: "Click me";

}

2 - How to get the selected filename value, and update the input to show the value.

Once a file is selected, the value can be obtained using JavaScript/jQuery.

$('.custom-file-input').on('change',function(){

    var fileName = $(this).val();

})

However, since the placeholder text for the input is a pseudo element, there's no easy way to manipulate this with Js/jQuery. You can however, have a another CSS class that hides the pseudo content once the file is selected...

.custom-file-control.selected:lang(en)::after {

  content: "" !important;

}

Use jQuery to toggle the .selected class on the .custom-file-control once the file is selected. This will hide the initial placeholder value. Then put the filename value in the .form-control-file span...

$('.custom-file-input').on('change',function(){

  var fileName = $(this).val();

  $(this).next('.form-control-file').addClass("selected").html(fileName);

})

You can then handle the file upload or re-selection as needed.

Demo on Codeply (alpha 6)

I just solved it this way

Html:

<div class="custom-file">

   <input id="logo" type="file" class="custom-file-input">

   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>

</div>

JS:

$('.custom-file-input').on('change', function() { 

   let fileName = $(this).val().split('\').pop(); 

   $(this).next('.custom-file-label').addClass("selected").html(fileName); 

});

Note: Thanks to ajax333221 for mentioning the .text-truncate class that will hide the overflow within label if the selected file name is too long.

For changing the language of the file browser:

As an alternate to what ZimSystem mentioned (override the CSS), a more elegant solution is suggested by the bootstrap docs: build your custom bootstrap styles by adding languages in SCSS

Read about it here: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Note: you need to have the lang attribute properly set in your document for this to work

For updating the value on file selection:

You could do it with inline js like this:

   <label class="custom-file">

      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\').slice(-1)[0])">

      <span class="custom-file-control"></span>

   </label>

Note: the .split('\').slice(-1)[0] part removes the C:fakepath prefix

 <!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">



    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

  <div class="custom-file">

    <input type="file" class="custom-file-input" id="inputGroupFile01">

    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>

  </div>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

 <script>

$(function() {

  $(document).on('change', ':file', function() {var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1,

        label = input.val().replace(/\/g, '/').replace(/.*//, '');input.trigger('fileselect', [numFiles, label]);

  });

  $(document).ready( function() {

      $(':file').on('fileselect', function(event, numFiles, label) {var input = $(this).parents('.custom-file').find('.custom-file-label'),

      log = numFiles > 1 ? numFiles + ' files selected' : label;if( input.length ) {input.text(log);} else {if( log ) alert(log);}});

  });

});

 </script>

  </body>

</html>