Bootstrap 4 Custom File Input Button Text | Techiediaries

In this quick tip article, we’ll see how to use custom text and styles with Bootstrap 4 file input.

Bootstrap 4 File Input

HTML file input enables you to upload one or multiple files such as images or import data from files.

Bootstrap 4 Basic and Custom Input

Bootstrap 4 enables you to use two types of file inputs which are basic and custom inputs.

You can simply add the .form-control-file to your <input> element for a basic file input.

For the custom file input, you need to add the .custom-file-input class to the <input> element and the .custom-file-label class to the <label> element.

This a basic Bootstrap 4 file input example:

<div
 
class=
"form-group"
>
    
<label
 
for=
"input1"
>
Example file input
</label>
    
<input
 
type=
"file"
 
class=
"form-control-file"
 
id=
"input1"
>
</div>

This is a second example with a custom file input:

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

Customize the File Input with Bootstrap

You can use the Bootstrap 4 classes and CSS to customize the custom file input.

Let’s take the following example:

<div
 
class=
"container"
>
    
<label
 
class=
"custom-file"
 
for=
"customInput"
>
        
<input
 
type=
"file"
 
class=
"custom-file-input"
 
id=
"customInput"
 
aria-describedby=
"fileHelp"
>
        
<span
 
class=
"custom-file-control form-control-file"
></span>
    
</label>
</div>

This is the CSS code for customizing the file input:

#customFile
 
.custom-file-control
:lang
(
en
)
::after
 
{
  
content
:
 
"Select file..."
;
}

#customFile
 
.custom-file-control
:lang
(
en
)
::before
 
{
  
content
:
 
"Click me"
;
}

Displaying the Selected File Name with JavaScript

You can display the selected file name with JavaScript.

Let’s assume we have a custom-file-input element with label that is the next sibling element to the input.

We can use the following JavaScript code for displaying the file name after selecting a file”

document
.
querySelector
(
'.custom-file-input'
).
addEventListener
(
'change'
,
function
(
e
){
  
var
 
fileName
 
=
 
document
.
getElementById
(
"exampleInputFile"
).
files
[
0
].
name
;
  
var
 
nextSibling
 
=
 
e
.
target
.
nextElementSibling
  
nextSibling
.
innerText
 
=
 
fileName
})

References