custom input file in bootstrap 4 not show button

html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

12,296

Solution 1

As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR

Solution 2

The documentation states that you should set the language of the document. For example, setting just:

<html lang="en">

was enough to get it working, unless like in @masud_moni answer, you have specified another language then use that instead of "en".

Solution 3

Try using the following code. Hope it is gonna fix your problem. It is given just under the code example in the Bootstrap page.

$custom-file-text: (
    placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."
    ),
    button-label: (
        en: "Browse",
        es: "Navegar"
    )
);

Solution 4

Concerning the button, you can specify the language in your .css file and it will appear :

.custom-file-control:lang(fr)::before{
    content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
    content:"BROWSE";
}

Solution 5

To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.

At this moment, there open issue to get the filename inside the custom control after selection... you can apply the onchange event workaround showed here.

/* Valid for any language */
.custom-file-control:before {
	content: "Search";
}
.custom-file-control:empty::after {
	content: "Choose a file...";
}

/* Specific for spanish language */
.custom-file-control:lang(es)::before {
	content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
	content : "Seleccionar un fichero...";
}

<!DOCTYPE html>
<html lang="es-es">
<head>
	<title>Test custom-file-control</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
	<div class="mt-5 ml-5">
	  <label class="custom-file">
	    <input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])" required>
	    <span class="custom-file-control"></span>
	  </label>
	</div>
</body>
</html>

View more solutions

12,296

Soheil Alizadeh

Updated on June 04, 2022

Comments

Soheil Alizadeh almost 2 years
When I use Custom input file in bootstrap 4, don't change my input and don't show browse button.

file-browser
```
<label class="custom-file">
    <input type="file" id="Image" class="custom-file-input">
    <span class="custom-file-control"></span>
</label>
```
.custom-file
```
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
```
.custom-file-input
```
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
```
.custom-file-control
```
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
```
- masud_moni about 7 years
  
  According to Bootstrap it is totally based on CSS. There could be some problem with your css file integration. Did you check it thoroughly?
- Soheil Alizadeh about 7 years
  
  @masud_moni Yes, I Chack All css commands and file.
- masud_moni about 7 years
  
  Did you use any scripting code for this element?
- Soheil Alizadeh about 7 years
  
  @masud_moni No, this element doesn't need the script.
Stuart almost 7 years

This is not the correct way as per the doc's. Please see my answer for more information. While this may get it working, it is bypassing some functionality built in to Bootstrap.
JavierFuentes over 6 years

@IsmailFarooq, not the correct answer for non english pages... I prefer rafa226 answer below
JavierFuentes over 6 years

You can see my answer below to solve the issue with non english pages and with filename capture
masud_moni over 6 years

@JavierFuentes Please check the bootstrap documentation. You will find it there. I found it when I looked on that document
FastTrack about 6 years

This still doesn't seem to do the trick for me using version 4.0.0-beta.2
Stuart almost 6 years

Instead of "en" what if you were to use your own countries value? Does that not work? While my answer may not be "correct" for non-english pages, I do advise that you should use your own countries value instead of en.