File uploads

  1. Forms
  2. Form Elements
  3. File uploads

Picker options

Single file, multiple files, disabled state and size variants. 

<input class="form-control" type="file">
<input class="form-control" type="file" multiple>
<input class="form-control" type="file" disabled>
<input class="form-control form-control-sm" type="file">
<input class="form-control form-control-lg" type="file">

Project attachments

Add up to six files and reorder them before submission.

Maximum 6 files ยท 3 MB per file. 
<input type="file" class="multiple-filepond"
       name="filepond" multiple data-allow-reorder="true"
       data-max-file-size="3MB" data-max-files="6">

Profile image

Single image with a square crop preview.

PNG, JPG or GIF.
<input type="file" class="single-fileupload"
       accept="image/png, image/jpeg, image/gif">

Drag files into the upload area

You can also choose files from your device. 

<form class="dropzone" method="post"
      action="https://httpbin.org/post" data-single="true">
</form>