Basic example
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.
Most common use examples of file upload component is CSV upload CRM system, avatar picture upload, simple GIF upload.
<div class="flex justify-center">
<div class="mb-3 w-96">
<label for="formFile" class="form-label inline-block mb-2 text-gray-700">Default file input example</label>
<input class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFile">
</div>
</div>
Multiple files input
Use the multiple attribute to the input to add multiple files with one input.
<div class="flex justify-center">
<div class="mb-3 w-96">
<label for="formFileMultiple" class="form-label inline-block mb-2 text-gray-700">Multiple files input example</label>
<input class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFileMultiple" multiple>
</div>
</div>
<!-- Custom scripts -->
<script type="text/javascript">
const checkbox = document.getElementById("flexCheckIndeterminate");
checkbox.indeterminate = true;
</script>
Disabled file input
Use the disabled attribute to make file input unusable and un-clickable.
<div class="flex justify-center">
<div class="mb-3 w-96">
<label for="formFileDisabled" class="form-label inline-block mb-2 text-gray-700">Disabled file input example</label>
<input class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-gray-100 bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFileDisabled" disabled>
</div>
</div>
Small file input
File input size can be made small.
<div class="flex justify-center">
<div class="mb-3 w-96">
<label for="formFileSm" class="form-label inline-block mb-2 text-gray-700">Small file input example</label>
<input class="form-control
block
w-full
px-2
py-1
text-sm
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="formFileSm" type="file">
</div>
</div>
Large file input
File input size can be made large.
<div class="flex justify-center">
<div class="mb-3 w-96">
<label for="formFileLg" class="form-label inline-block mb-2 text-gray-700">Large file input example</label>
<input class="form-control
block
w-full
px-2
py-1.5
text-xl
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="formFileLg" type="file">
</div>
</div>
If you are looking for more advanced options, try Bootstrap File Input from MDBootstrap.