CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
Soheil Alizadeh
Soheil Alizadeh

Reputation: 3066

custom input file in bootstrap 4 not show button

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;

enter image description here

Upvotes: 7

Views: 12937

Answers (6)

Adrian B
Adrian B

Reputation: 41

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>

Upvotes: 1

JavierFuentes
JavierFuentes

Reputation: 1858

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>

Upvotes: 2

rafa226
rafa226

Reputation: 546

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

Upvotes: 2

Stuart
Stuart

Reputation: 267

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

Upvotes: 12

masud_moni
masud_moni

Reputation: 1250

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

Upvotes: 2

Kuba Wojtach
Kuba Wojtach

Reputation: 566

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

Upvotes: 13

Related Questions