File inputs

Best practices

  • Include copy that clearly indicates file size and file type restrictions.
  • Include copy that explains why the files are necessary and what they’ll be used for after they’ve been uploaded.
  • Always indicate when a file has been successfully added while displaying the name of the file.
  • Provide options to remove and re-upload files that have already been added.

How it works

For file inputs, swap the .form-control for .form-control-file.

Files must be JPG's less than 2MB
<div class="form-group">
  <label for="exampleFormControlFile1">Upload a file</label>
  <input type="file" class="form-control-file" id="exampleFormControlFile1">
  <small class="form-text text-muted">
    Files must be JPG's less than 2MB