AdminKit

Bootstrap 5 File upload

File upload ​

The Bootstrap file input component is a field which the user can use to upload one or more files (photos, documents, pdf's, etc) from their device.

Example ​

html
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

Sizes ​

Set heights using classes like .form-control-lg and .form-control-sm.

html
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Default file input example</label>
  <input class="form-control" id="formFileMd" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Disabled ​

Add the disabled boolean attribute on an file input to give it a grayed out appearance and remove pointer events.

html
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>

Readonly ​

Add the readonly boolean attribute on an file input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

html
<div class="mb-3">
  <label for="formFileReadonly" class="form-label">Readonly file input example</label>
  <input class="form-control" type="file" id="formFileReadonly" readonly>
</div>

Multiple files ​

Add the multiple boolean attribute on an file input to enable multi-file selection.

html
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>