Bootstrap 4 File Input

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:

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

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

4 Answers
4

Updated 2018

Bootstrap 4.1

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

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.

lang=""

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..

custom-file-control

::after

::before

#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...

.selected

.custom-file-control

.form-control-file

$('.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)

C:fakepath...

C:fakepath...

var fileName = document.getElementById("upload-image-input").files[0].name;

span

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.

.text-truncate

.split('\').pop()

type="file"

<input>

type

class='custom-file-label text-truncate'

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

.split('\').slice(-1)[0]

$('.custom-file-input').change(function () $(this).next().after().text($(this).val().split('\').slice(-1)[0]); );

<!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>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.