File

Bootstrap File upload / file input

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.

Note: If you need more advanced functionalities, check also Drag & drop file upload .

Basic example

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.

Edit in sandbox 
        
            
          <label class="form-label" for="customFile">Default file input example</label>
          <input type="file" class="form-control" id="customFile" />

Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.

Edit in sandbox 
        
            
          <label for="formFileDisabled" class="form-label">Disabled file input example</label>
          <input class="form-control" type="file" id="formFileDisabled" disabled />

Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs.

Edit in sandbox 
        
            
          <label for="formFileSm" class="form-label">Small file input example</label>
          <input class="form-control form-control-sm" id="formFileSm" type="file" />
          <label for="formFileLg" class="form-label">Large file input example</label>
          <input class="form-control form-control-lg" id="formFileLg" type="file" />

Multiple example

You can choose multiple files with one input as well. Just add the multiple attribute to the <input>

Edit in sandbox 
        
            
          <label for="formFileMultiple" class="form-label">Multiple files input example</label>
          <input class="form-control" type="file" id="formFileMultiple" multiple />