Here, we will see how to create a custom input file upload button using bootstrap 5. The html input file allows us to upload a single or multiple files and images to the server. This input file consists of type and name attributes.
Syntex: <input type="file" id="file" name="file"> The basic html input file created by just adding the bootstrap class .form-control-file with the input element.
<form>
<div class="form-group">
<input type="file" class="form-control-file">
</div>
</form> For a custom input file, we just need to add .custom-file-input class attribute to the input file and also need to add .custom-file-label class attribute to the label tag.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customfileinput" required>
<label class="custom-file-label" for="customfileinput">Choose file...</label>
</div> Here, we will also see selected input file names using jquery.
$('#customfileinput').on('change', function(){
files = $(this)[0].files;
name = '';
for(var i = 0; i < files.length; i++){
name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : "");
}
$(".custom-file-label").html(name);
}) Example
Here is the final codes of custom input file with bootstrap 5 and also how to display the selected file name on the system using jquery.
<!DOCTYPE html>
<html>
<head>
<title>How to create custom input file with bootstrap 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<form enctype="multipart/form-data">
<div class="card">
<div class="card-header">Custom input file name sleected example</div>
<div class="card-body">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customfileinput" name="customfileinput">
<label class="custom-file-label" for="customfileinput">Choose the File</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-12">
<button class="btn btn-success btn-raised btn-lg">Upload</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
<script>
$('#customfileinput').on('change', function(){
files = $(this)[0].files;
name = '';
for(var i = 0; i < files.length; i++){
name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : "");
}
$(".custom-file-label").html(name);
})
</script>
</html> Create an external stylesheet and link it to the html file to view with better design.
html, body{
padding: 20px;
margin: 20px;
text-align: center;
}
.custom-file{padding-bottom: 20px;}