Sign in


Sign up


Bootstrap File Input

Bootstrap file input is a field which user can use to upload one or more files (photos, documents or any other file type) from the local storage.

Standard file inputs usually leave a lot to wish for in terms of design, but MDB takes care of that by enhancing them with Material Design best practices.

Most common use examples:

  • CSV upload to CRM system
  • Avatar picture upload
  • Simple GIF upload

Below you can see a number of Bootstrap file inputs created with Material Design for Bootstrap.


Basic examples MDB Pro component

Choose file
Choose files
                
<form>
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>
                
            

File inputs with photo placeholder MDB Pro component

example placeholder
Choose file
example placeholder avatar
Add photo
                
.avatar-pic {
  width: 150px; }
                
            
                
<form>
    <div class="file-field">
        <div class="z-depth-1-half mb-4">
            <img src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" class="img-fluid">
        </div>
        <div class="d-flex justify-content-center">
            <div class="btn btn-mdb-color btn-rounded">
                <span>Choose file</span>
                <input type="file">
            </div>
        </div>
    </div>
</form>

<form>
    <div class="file-field">
        <div class="mb-4">
            <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" class="rounded-circle z-depth-1-half avatar-pic">
        </div>
        <div class="d-flex justify-content-center">
            <div class="btn btn-mdb-color btn-rounded">
                <span>Add photo</span>
                <input type="file">
            </div>
        </div>
    </div>
</form>
                
            

File inputs with gradient floating buttons MDB Pro component

                
.file-field .btn-floating {
  float: left; }
                
            
                
<form>
    <div class="file-field">
        <a class="btn-floating peach-gradient mt-0">
            <i class="fa fa-paperclip" aria-hidden="true"></i>
            <input type="file">
        </a>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field">
        <a class="btn-floating blue-gradient mt-0">
            <i class="fa fa-heart-o" aria-hidden="true"></i>
            <input type="file">
        </a>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field">
        <a class="btn-floating purple-gradient mt-0">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i>
            <input type="file">
        </a>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>
                
            

File inputs with large floating buttons MDB Pro component

                
.file-field .btn-floating {
  float: left; }
.file-field.big .file-path-wrapper {
  height: 3.2rem; }
  .file-field.big .file-path-wrapper .file-path {
    height: 3rem; }
                
            
                
<form>
    <div class="file-field big">
        <a class="btn-floating btn-lg pink lighten-1 mt-0">
            <i class="fa fa-paperclip" aria-hidden="true"></i>
            <input type="file" multiple>
        </a>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form>
    <div class="file-field big">
        <a class="btn-floating btn-lg cyan darken-2 mt-0">
            <i class="fa fa-heart-o" aria-hidden="true"></i>
            <input type="file" multiple>
        </a>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form>
    <div class="file-field big">
        <a class="btn-floating btn-lg amber darken-2 mt-0">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i>
            <input type="file" multiple>
        </a>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>
                
            

File inputs with rounded gradient buttons MDB Pro component

Choose file
Choose file
Choose file
                
.file-field.medium .file-path-wrapper {
  height: 3rem; }
  .file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
  height: 3.7rem; }
  .file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem; }
                
            
                
<form>
    <div class="file-field">
        <div class="btn btn-rounded purple-gradient btn-sm">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field medium">
        <div class="btn btn-rounded aqua-gradient">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field big-2">
        <div class="btn btn-rounded peach-gradient btn-lg">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>
                
            

File inputs with rounded gradient buttons MDB Pro component

Choose file
Choose file
Choose file
                
.file-field.medium .file-path-wrapper {
  height: 3rem; }
  .file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
  height: 3.7rem; }
  .file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem; }
                
            
                
<form>
    <div class="file-field">
        <div class="btn btn-outline-success btn-rounded waves-effect btn-sm">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field medium">
        <div class="btn btn-outline-secondary btn-rounded waves-effect">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form>
    <div class="file-field big-2">
        <div class="btn btn-outline-warning btn-rounded waves-effect btn-lg">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>
                
            

File inputs with colorful buttons MDB Pro component

Choose files
Choose files
Choose files
                
.file-field.medium .file-path-wrapper {
  height: 3rem; }
  .file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
  height: 3.7rem; }
  .file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem; }
                
            
                
<form action="#">
    <div class="file-field">
        <div class="btn btn-unique btn-sm">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field medium">
        <div class="btn btn-light-blue">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field big-2">
        <div class="btn btn-cyan btn-lg">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>
                
            

File inputs with outline buttons MDB Pro component

Choose files
Choose files
Choose files
                
.file-field.medium .file-path-wrapper {
  height: 3rem; }
  .file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
  height: 3.7rem; }
  .file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem; }
                
            
                
<form action="#">
    <div class="file-field">
        <div class="btn btn-outline-info waves-effect btn-sm">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field medium">
        <div class="btn btn-outline-default waves-effect">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field big-2">
        <div class="btn btn-outline-danger waves-effect btn-lg">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>
                
            

File inputs with buttons with icons MDB Pro component

Choose files
Choose file
Choose files
Choose file
                
.file-field.medium .file-path-wrapper {
  height: 3rem; }
  .file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
  height: 3.7rem; }
  .file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem; }
                
            
                
<form action="#">
    <div class="file-field medium">
        <div class="btn btn-outline-primary waves-effect">
            <span>Choose files<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form>
    <div class="file-field big-2">
        <div class="btn btn-outline-danger btn-rounded waves-effect btn-lg">
            <span>Choose file<i class="fa fa-upload ml-3" aria-hidden="true"></i></span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>

<form action="#">
    <div class="file-field">
        <div class="btn blue-gradient btn-sm">
            <span><i class="fa fa-cloud-upload mr-2" aria-hidden="true"></i>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>

<form>
    <div class="file-field">
        <div class="btn btn-pink btn-rounded btn-sm">
            <span><i class="fa fa-upload mr-2" aria-hidden="true"></i>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>
                
            

File inputs within cards MDB Pro component

Choose file

Choose files
                
.card.light-version .file-field input[type=text] {
  border-bottom: 1px solid #fff; }
  .card.light-version .file-field input[type=text]::-webkit-input-placeholder {
    color: #fff;
    font-weight: 300; }
  .card.light-version .file-field input[type=text]::-moz-placeholder {
    color: #fff;
    font-weight: 300; }
  .card.light-version .file-field input[type=text]:-ms-input-placeholder {
    color: #fff;
    font-weight: 300; }
  .card.light-version .file-field input[type=text]::placeholder {
    color: #fff;
    font-weight: 300; }
  .card.light-version .file-field input[type=text]:focus:not([readonly]) {
    -webkit-box-shadow: 0 1px 0 0 #fff;
    box-shadow: 0 1px 0 0 #fff; }
  .card.light-version .file-field input[type=text].valid {
    border-bottom: 1px solid #00c851;
    -webkit-box-shadow: 0 1px 0 0 #00c851;
    box-shadow: 0 1px 0 0 #00c851; }
  .card.light-version .file-field input[type=text]:focus.valid {
    border-bottom: 1px solid #00c851;
    -webkit-box-shadow: 0 1px 0 0 #00c851;
    box-shadow: 0 1px 0 0 #00c851; }
                
            
                
<!--Card-->
<div class="card indigo text-center z-depth-2 light-version py-4 px-5">

    <form action="#">
        <div class="file-field">
            <div class="btn btn-outline-white waves-effect btn-sm">
                <span>Choose file<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
                <input type="file">
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate text-white" type="text" placeholder="Upload your file">
            </div>
        </div>
    </form>

    <hr class="w-100 my-4">

    <form action="#">
        <div class="file-field">
            <div class="btn btn-outline-white btn-rounded waves-effect btn-sm">
                <span>Choose files<i class="fa fa-cloud-upload ml-3" aria-hidden="true"></i></span>
                <input type="file" multiple>
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate text-white" type="text" placeholder="Upload one or more files">
            </div>
        </div>
    </form>

</div>
<!--/.Card-->

<!--Card-->
<div class="card mdb-color lighten-4 text-center z-depth-2 light-version py-4 px-5">

     <form class="mb-3">
         <div class="file-field">
             <a class="btn-floating peach-gradient mt-0">
                 <i class="fa fa-paperclip" aria-hidden="true"></i>
                 <input type="file">
             </a>
             <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload your file">
             </div>
         </div>
     </form>

     <form class="mb-3">
         <div class="file-field">
             <a class="btn-floating peach-gradient mt-0">
                 <i class="fa fa-paperclip" aria-hidden="true"></i>
                 <input type="file">
             </a>
             <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload your file">
             </div>
         </div>
     </form>

     <form>
         <div class="file-field">
             <a class="btn-floating peach-gradient mt-0">
                 <i class="fa fa-paperclip" aria-hidden="true"></i>
                 <input type="file">
             </a>
             <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload your file">
             </div>
         </div>
     </form>

</div>
<!--/.Card-->