How to Create Custom File Input with Bootstrap File Input

Last updated on: March 1, 2023 by Digamber

In this tutorial, we will learn how to create a custom File Upload Input button using Bootstrap 5.

HTML File Input

File uploading is a common and consecutive task when it comes to uploading a File to the server. In that case, the first thing is to create this element. HTML File Input allows us to upload single and multiple images and files.

Here is the HTML syntax which forms the File Input.

<input type="file" id="file" name="file">

A simple File input attribute consists of type="file" and name="" properties.

Bootstrap 4/5 Custom File Input Types

Bootstrap 5/4 mainly offers two File Input types (Basic and Custom Inputs) that you can use to upload files and images simultaneously for single and multiple files.

The basic file input can be created by just adding a .form-control-file class with the <input> element.

<form>
  <div class="form-group">
    <input type="file" class="form-control-file">
  </div>
</form>

Creating Bootstrap custom file input is easy; you have to include a .custom-file-input class with HTML’s <input> attribute. Also, add a .custom-file-label class with a <label> attribute.

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

So, these were the straightforward methods for Bootstrap 4 file input examples.

Create Custom File Input with Bootstrap

Bootstrap elements are developed in such a way that you can customize them upto a greater extent.

Likewise, we are customizing the Custom File Input using Bootstrap Classes and some custom CSS. It is indeed effortless and a no-brainer as well.

Lets, spruce it up by adding some styling to Bootstrap File input.

.custom-file-input.selected:lang(en)::after {
  content: "" !important;
}
.custom-file {
  overflow: hidden;
}
.custom-file-input {
  white-space: nowrap;
}

Go ahead and add the code in your HTML template to build the Bootstrap file upload component.

<div class="container">
  <div class="input-group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput">
      <label class="custom-file-label" for="customFileInput">Select file</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-primary" type="button" id="customFileInput">Upload</button>
    </div>
  </div>
</div>

Display Selected File Name using JavaScript

One more task is left, and that is to show the selected File name onto the file input element.

Guess what this is very easy to achieve with core JavaScript, we have to make a little bit DOM calculation.

The label is the direct sibling of the custom file input element, so here is the code that will do the job for us.

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

Here is the final code, i hope you will like this rapid tutorial and share it with others.

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Bootstrap 4 File Upload Input Example</title>
  <style>
    .custom-file-input.selected:lang(en)::after {
      content: "" !important;
    }
    .custom-file {
      overflow: hidden;
    }
    .custom-file-input {
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="input-group">
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select file</label>
      </div>
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" id="customFileInput">Upload</button>
      </div>
    </div>
  </div>
  <script>
    document.querySelector('.custom-file-input').addEventListener('change', function (e) {
      var name = document.getElementById("customFileInput").files[0].name;
      var nextSibling = e.target.nextElementSibling
      nextSibling.innerText = name
    })
  </script>
</body>
</html>

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

HTML File Input

Bootstrap 4/5 Custom File Input Types

Create Custom File Input with Bootstrap

Display Selected File Name using JavaScript

Recommended Posts: