File Input
Bootstrap File Input
Bootstrap File Input is a field which the user can use to upload one or more files (photos, documents or any other file type) from local storage.
Standard file inputs usually leave a lot to be desired in terms of design, but MDB takes care of that by enhancing them with Material Design best practices.
Some of the most common use examples are:
- 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.
Note: If you need more advanced functionalities, have a look at our Drag and drop file upload plugin.
Default file input
Default styling for Bootstrap File Input component
Upload
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
Material file input MDB Pro component
Material Design styling for Bootstrap File Input component
<form class="md-form">
<div class="file-field">
<div class="btn btn-primary btn-sm float-left">
<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>
Improved Default File-Input
This component allows you can add select files and see which files you picked. You have options: severally
or multipy. If you want choose more files than 1 you have to add multiple and data-multiple-target
to your input.
One selected file
Upload
<div class="input-default-wrapper mt-3">
<span class="input-group-text mb-3" id="input1">Upload</span>
<input type="file" id="file-with-current" class="input-default-js">
<label class="label-for-default-js rounded-right mb-3" for="file-with-current"><span class="span-choose-file">Choose
file</span>
<div class="float-right span-browse">Browse</div>
</label>
</div>
Multiple selected files
Upload
<div class="input-default-wrapper mt-5">
<span class="input-group-text mb-3" id="input2">Upload</span>
<input type="file" id="file-with-multi-file" class="input-default-js" data-multiple-target="{target} files selected"
multiple>
<label class="label-for-default-js rounded-right mb-3" for="file-with-multi-file"><span class="span-choose-file">Choose
file</span>
<div class="float-right span-browse">Browse</div>
</label>
</div>
Multiple files input MDB Pro component
<form class="md-form" action="#">
<div class="file-field">
<div class="btn btn-primary btn-sm float-left">
<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
<form class="md-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" alt="example placeholder">
</div>
<div class="d-flex justify-content-center">
<div class="btn btn-mdb-color btn-rounded float-left">
<span>Choose file</span>
<input type="file">
</div>
</div>
</div>
</form>
<form class="md-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"
alt="example placeholder avatar">
</div>
<div class="d-flex justify-content-center">
<div class="btn btn-mdb-color btn-rounded float-left">
<span>Add photo</span>
<input type="file">
</div>
</div>
</div>
</form>
.avatar-pic {
width: 150px;
}
File inputs with gradient floating buttons MDB Pro component
<form class="md-form">
<div class="file-field">
<a class="btn-floating peach-gradient mt-0 float-left">
<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="md-form">
<div class="file-field">
<a class="btn-floating blue-gradient mt-0 float-left">
<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 class="md-form">
<div class="file-field">
<a class="btn-floating purple-gradient mt-0 float-left">
<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
<form class="md-form">
<div class="file-field big">
<a class="btn-floating btn-lg pink lighten-1 mt-0 float-left">
<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 class="md-form">
<div class="file-field big">
<a class="btn-floating btn-lg cyan darken-2 mt-0 float-left">
<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 class="md-form">
<div class="file-field big">
<a class="btn-floating btn-lg amber darken-2 mt-0 float-left">
<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-field.big .file-path-wrapper {
height: 3.2rem; }
.file-field.big .file-path-wrapper .file-path {
height: 3rem; }
File inputs with rounded gradient buttons MDB Pro component
<form class="md-form">
<div class="file-field">
<div class="btn btn-rounded purple-gradient btn-sm float-left">
<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 class="md-form">
<div class="file-field medium">
<div class="btn btn-rounded aqua-gradient float-left">
<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 class="md-form">
<div class="file-field big-2">
<div class="btn btn-rounded peach-gradient btn-lg float-left">
<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-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; }
File inputs with rounded outline buttons MDB Pro component
<form class="md-form">
<div class="file-field">
<div class="btn btn-outline-success btn-rounded waves-effect btn-sm float-left">
<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 class="md-form">
<div class="file-field medium">
<div class="btn btn-outline-secondary btn-rounded waves-effect float-left">
<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 class="md-form">
<div class="file-field big-2">
<div class="btn btn-outline-warning btn-rounded waves-effect btn-lg float-left">
<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-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; }
File inputs with colorful buttons MDB Pro component
<form class="md-form" action="#">
<div class="file-field">
<div class="btn btn-unique btn-sm float-left">
<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 class="md-form" action="#">
<div class="file-field medium">
<div class="btn btn-light-blue float-left">
<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 class="md-form" action="#">
<div class="file-field big-2">
<div class="btn btn-cyan btn-lg float-left">
<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-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; }
File inputs with outline buttons MDB Pro component
<form class="md-form" action="#">
<div class="file-field">
<div class="btn btn-outline-info waves-effect btn-sm float-left">
<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 class="md-form" action="#">
<div class="file-field medium">
<div class="btn btn-outline-default waves-effect float-left">
<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 class="md-form" action="#">
<div class="file-field big-2">
<div class="btn btn-outline-danger waves-effect btn-lg float-left">
<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-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; }
File inputs with buttons with icons MDB Pro component
<form class="md-form" action="#">
<div class="file-field">
<div class="btn blue-gradient btn-sm float-left">
<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 class="md-form">
<div class="file-field">
<div class="btn btn-pink btn-rounded btn-sm float-left">
<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>
<form class="md-form" action="#">
<div class="file-field medium">
<div class="btn btn-outline-primary waves-effect float-left">
<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 class="md-form">
<div class="file-field big-2">
<div class="btn btn-outline-danger btn-rounded waves-effect btn-lg float-left">
<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>
.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; }
File inputs within cards MDB Pro component
<!--Card-->
<div class="card indigo text-center z-depth-2 light-version py-4 px-5">
<form class="md-form" action="#">
<div class="file-field">
<div class="btn btn-outline-white waves-effect btn-sm float-left">
<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 class="md-form" action="#">
<div class="file-field">
<div class="btn btn-outline-white btn-rounded waves-effect btn-sm float-left">
<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="md-form" class="mb-3">
<div class="file-field">
<a class="btn-floating peach-gradient mt-0 float-left">
<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="md-form" class="mb-3">
<div class="file-field">
<a class="btn-floating peach-gradient mt-0 float-left">
<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="md-form">
<div class="file-field">
<a class="btn-floating peach-gradient mt-0 float-left">
<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-->
.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; }
Drag and drop file upload
Drag and drop file upload plugin is an extension that allows you to upload files by using drag and drop functionality. Easy to use, setup and customize.
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue