Styling Input type="file" button using CSS & Bootstrap

There can be situtations in which you may need to style your <input type='file'> button, so here i am going to explain few techniques to achieve this using CSS, Bootstrap and jQuery/javascript, there are already many many ways on the internet to achieve this, but we will discuss some basics and easy ways to complete it with cross browser support.

Cross browser solution to style input type='file' using pure CSS (No javascript)

Here is the source for this, HTML

<label for="file-upload" class="custom-file-upload">
     Upload
</label>
<input id="file-upload" type="file"/>

Hide the main input file type using CSS and give button css to custome button

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

Here is the working fiddle link https://jsfiddle.net/j27kzftr/

But the draw back of the above solution is you don't get the name of the file which is added,so let try another approach for this

Styling Input type file button using CSS and Javascript

In this approach, we will also implement javascript to get the file name on file input change, so here is the quick code for it.

HTML

<input id="uploadFile" placeholder="File Name here" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

CSS to hide the actual input and make it as a button

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

and the javascript to show file name on input type file change

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

The output of the above code will be as below

Here is the working fiddle sample

Please Note: I am also using Bootstrap.min.css to apply styling to button

Using Bootstrap/jQuery to style file input button

Now let's use the bootstrap way make it look better and provide you file name using jquery code, so here is the code for it.

HTML code below uses bootstrap classes to create a input group which has input type='file' but hidden and then it also creates html with input type='text' to show the browsed file names.

<div class="col-lg-6 col-sm-6 col-12">
  
            <div class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary">
                        Browse File <input type="file" style="display: none;" multiple>
                    </span>
                </label>
                <input type="text" class="form-control" readonly>
            </div>
           
        </div>

For the above HTML, we don't need any custom CSS, as all the styling part is already done using Bootstrap and we have made the input type="file" hidden using inline-css.

So, here is the jQuery part to get file name and append it in text control.

$(function() {

  // This code will attach `fileselect` event to all file inputs on the page
  $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
  });

  
  $(document).ready( function() {
//below code executes on file input change and append name in text control
      $(':file').on('fileselect', function(event, numFiles, label) {

          var input = $(this).parents('.input-group').find(':text'),
              log = numFiles > 1 ? numFiles + ' files selected' : label;

          if( input.length ) {
              input.val(log);
          } else {
              if( log ) alert(log);
          }

      });
  });
  
});

Executing the above code and selecting any file, will give your output as below

Here is the working fiddle sample:

The above method works well in IE9 and above and in recent versions of Chrome, Safari, Firefox, and Opera.

Style input using Bootstrap and Pure Javascript (No jQuery)

Since, many developers are moving to pure javascript instead of using jQuery framework, so let's try to make above solution work with Bootstrap and Javascript only.

I am still using Bootstrap 3 for this example, but you can use latest version, and update CSS classes based on that.

So here is the HTML for that

<br/><br/>
<div class="col-lg-6 col-sm-6 col-12">
  
            <div class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary">
                        Browse&hellip; <input type="file" style="display: none;" id="file" multiple>
                    </span>
                </label>
                <input type="text" class="form-control" id="inputBox" readonly>
            </div>
           
        </div>

and Javascript to trigger event on file select would be like this

const fileInput = document.getElementById('file');
fileInput.onchange = () => {
  const selectedFile = fileInput.files[0];

  document.getElementById('inputBox').value =selectedFile.name;
}

That's it, output design will be same as jQuery based solution.

You can try it using Fiddle also

That's it, hope it helps.

You may also like to read:

Showing Month and Year only in Bootstrap Datepicker

Bootstrap modal appearing below back-drop (in background) ??Why?

Select 2 drop-down input search doesn't work inside bootstrap pop-up modal

Select only Year in Bootstrap Datepicker

Vertical Carousel (Bootstrap 4 and Bootstrap 3 With jQuery)

Select only Year in Bootstrap Datepicker

Getting error "$(..).Datatable is not a function"

How to center div horizontally and vertically using flexbox?