File Input
Bootstrap File Input
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
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 info: The recommended plugin to animate default file input: bs-custom-file-input, that’s what we are using currently in our packages and you don't have to add by yourself.
Note info: 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
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
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>
Translating or customizing the strings with SCSS
The :lang() pseudo-class is used to allow for
translation of the “Browse” text into other languages. Override or
add entries to the $custom-mdb-file-text Sass variable with the relevant language tag and localized
strings. The English
strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s
language code is es):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Here’s lang(es) in action on the custom file input for a Spanish translation:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Here are examples in other languages.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="pl-Pl">
<label class="custom-file-label" for="customFileLang">Wybierz pliki</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="fr">
<label class="custom-file-label" for="customFileLang">Sélectionner le fichier </label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="in">
<label class="custom-file-label" for="customFileLang">pilih file </label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="zn">
<label class="custom-file-label" for="customFileLang">選擇文件</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="de">
<label class="custom-file-label" for="customFileLang">Wählen Sie die Datei aus</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="ru">
<label class="custom-file-label" for="customFileLang">Выберите файл</label>
</div>
Translating or customizing the strings with HTML
Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document
toe</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.webp" 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.webp"
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="fas 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="far fa-heart" 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="fas fa-cloud-upload-alt" 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="fas 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="far fa-heart" 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="fas fa-cloud-upload-alt" 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="fas fa-cloud-upload-alt 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="fas 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="fas fa-cloud-upload-alt 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="fas 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="fas fa-cloud-upload-alt 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="fas fa-cloud-upload-alt 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="fas 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="fas 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="fas 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.
