custom input file in bootstrap 4 not show button

Question

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

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

According to Bootstrap it is totally based on CSS. There could be some problem with your css file integration. Did you check it thoroughly? — masud_moni
– masud_moni, Commented Mar 3, 2017 at 8:25

Kuba Wojtach · Accepted Answer · 2017-03-03 08:35:11Z

13

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

answered Mar 3, 2017 at 8:35

Kuba Wojtach

5663 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stuart Over a year ago

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 a year ago

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

Stuart · Accepted Answer · 2017-06-04 23:39:25Z

12

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

answered Jun 4, 2017 at 23:39

Stuart

2671 gold badge5 silver badges15 bronze badges

3 Comments

JavierFuentes Over a year ago

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

FastTrack Over a year ago

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

Stuart Over a year ago

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.

masud_moni · Accepted Answer · 2017-03-03 08:36:30Z

2

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"
    )
);

answered Mar 3, 2017 at 8:36

masud_moni

1,30619 silver badges34 bronze badges

1 Comment

masud_moni Over a year ago

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

rafa226 · Accepted Answer · 2017-09-27 18:20:15Z

2

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";
}

answered Sep 27, 2017 at 18:20

rafa226

5768 silver badges17 bronze badges

Comments

JavierFuentes · Accepted Answer · 2017-12-25 20:24:26Z

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>

Adrian B · Accepted Answer · 2018-04-05 20:47:18Z

1

I hit the same problem, came here for solution, did not find it, so I continued to dig for it: the right way to do it is to have a div of class custom-file and the input and label inside it, not the input inside the label.

<div class="custom-file">
    <input type="file" id="Image" class="custom-file-input">    
    <label class="custom-file" for="Image">Select file to upload</label>
</div>

answered Apr 5, 2018 at 20:47

Adrian B

413 bronze badges

Collectives™ on Stack Overflow

custom input file in bootstrap 4 not show button

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related