File Upload

File inputs from the native control to drag and drop zones, avatar and cover uploads, file lists and upload progress - ready for documents, images and imports.

1Native file input

The standard file input styled with form-control.

Attach invoice

<label for="fu-single-671" class="form-label">Attach invoice</label>
<input class="form-control" type="file" id="fu-single-671">

2Multiple files

The multiple attribute lets people choose several files at once.

Project files

You can select up to 10 files.

<label for="fu-multi-672" class="form-label">Project files</label>
<input class="form-control" type="file" id="fu-multi-672" multiple aria-describedby="fu-multi-help-673"> 
<div id="fu-multi-help-673" class="form-text">
  You can select up to 10 files.
</div>

3Accept filters

accept limits the file picker to images, documents or spreadsheets.

Photo (JPG, PNG, WebP)

Contract (PDF)

Price list (CSV, XLSX)

<div class="row g-3">
  <div class="col-md-4">
    <label for="fu-img-674" class="form-label">Photo (JPG, PNG, WebP)</label>
    <input class="form-control" type="file" id="fu-img-674" accept="image/png, image/jpeg, image/webp">
  </div>
  <div class="col-md-4">
    <label for="fu-doc-675" class="form-label">Contract (PDF)</label>
    <input class="form-control" type="file" id="fu-doc-675" accept=".pdf,application/pdf">
  </div>
  <div class="col-md-4">
    <label for="fu-csv-676" class="form-label">Price list (CSV, XLSX)</label>
    <input class="form-control" type="file" id="fu-csv-676" accept=".csv,.xlsx">
  </div>
</div>

4Sizes

form-control-sm and form-control-lg work on file inputs as well.

Small Large

<label for="fu-sm-677" class="form-label small">Small</label>
<input class="form-control form-control-sm mb-3" type="file" id="fu-sm-677"> 
<label for="fu-lg-678" class="form-label">Large</label>
<input class="form-control form-control-lg" type="file" id="fu-lg-678">

5Disabled

A disabled file input, for example once the upload limit is reached.

Attachments

Storage is full - free up space to upload more.

<label for="fu-disabled-679" class="form-label">Attachments</label>
<input class="form-control" type="file" id="fu-disabled-679" disabled> 
<div class="form-text text-warning-emphasis">
  <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Storage is full - free up space to upload more.
</div>

6Drop zone

data-demo-dropzone accepts dragged files and lists them in the child file list.

Drag and drop files here

or click to browse

<div class="tl-dropzone position-relative text-center p-4" data-demo-dropzone>
  <div class="fs-2 text-primary">
    <i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i>
  </div>
  <p class="mb-1 fw-semibold">Drag and drop files here</p>
  <p class="small text-body-secondary mb-0">or click to browse</p>
  <label for="fu-drop-680" class="visually-hidden">Upload files</label>
  <input type="file" id="fu-drop-680" multiple class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor: pointer;"> 
  <ul class="list-unstyled small mt-3 mb-0 text-start" data-demo-filelist>
  </ul>
</div>

7Drop zone with browse button

A larger zone with a visible browse button and the accepted formats.

Upload your campaign images

PNG, JPG or GIF up to 10 MB each

Browse files

<div class="tl-dropzone text-center px-3 py-5" data-demo-dropzone>
  <div class="display-6 text-body-secondary mb-2">
    <i class="bi bi-images" aria-hidden="true"></i>
  </div>
  <h3 class="h6">Upload your campaign images</h3>
  <p class="small text-body-secondary">PNG, JPG or GIF up to 10 MB each</p>
  <label for="fu-drop-lg-681" class="btn btn-primary"><i class="bi bi-folder2-open" aria-hidden="true"></i> Browse files</label>
  <input type="file" id="fu-drop-lg-681" class="visually-hidden" accept="image/*" multiple> 
  <ul class="list-group list-group-flush text-start mt-3 small" data-demo-filelist>
  </ul>
</div>

8Avatar upload

A round preview with change and remove actions for profile photos.

Upload new photo

Square image, at least 400 x 400 px.

<div class="d-flex align-items-center gap-3">
  <img src="../assets/img/avatar-11.svg" alt="Theo Morgan" width="80" height="80" class="rounded-circle border"> 
  <div>
    <div class="d-flex flex-wrap gap-2 mb-1">
      <label for="fu-avatar-682" class="btn btn-sm btn-primary"><i class="bi bi-camera-fill" aria-hidden="true"></i> Upload new photo</label>
      <input type="file" id="fu-avatar-682" class="visually-hidden" accept="image/*"> 
      <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
    </div>
    <div class="small text-body-secondary">
      Square image, at least 400 x 400 px.
    </div>
  </div>
</div>

9Upload progress list

Each file shows its type icon, name and a progress bar.

proposal-experience.pdf Done
cover-photo.jpg65% of 4.1 MB
budget-2027.xlsx13% of 860 KB

<ul class="list-group">
  <li class="list-group-item"><div class="d-flex align-items-center gap-2 mb-1"><span class="fs-5 text-danger"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i></span><span class="flex-grow-1 small fw-semibold text-truncate">proposal-experience.pdf</span><span class="small text-body-secondary"><i class="bi text-success bi-check-circle-fill" aria-hidden="true"></i> Done</span></div><div class="progress" role="progressbar" aria-label="Upload progress for proposal-experience.pdf" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar bg-success" style="width: 100%"></div></div></li>
  <li class="list-group-item"><div class="d-flex align-items-center gap-2 mb-1"><span class="fs-5 text-info"><i class="bi bi-file-earmark-image-fill" aria-hidden="true"></i></span><span class="flex-grow-1 small fw-semibold text-truncate">cover-photo.jpg</span><span class="small text-body-secondary">65% of 4.1 MB</span></div><div class="progress" role="progressbar" aria-label="Upload progress for cover-photo.jpg" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 65%"></div></div></li>
  <li class="list-group-item"><div class="d-flex align-items-center gap-2 mb-1"><span class="fs-5 text-success"><i class="bi bi-file-earmark-spreadsheet-fill" aria-hidden="true"></i></span><span class="flex-grow-1 small fw-semibold text-truncate">budget-2027.xlsx</span><span class="small text-body-secondary">13% of 860 KB</span></div><div class="progress" role="progressbar" aria-label="Upload progress for budget-2027.xlsx" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 13%"></div></div></li>
</ul>

10Input group with button

A file input joined to an Upload button.

Import contacts

<label for="fu-ig-683" class="form-label">Import contacts</label>
<div class="input-group">
  <input type="file" class="form-control" id="fu-ig-683" accept=".csv,.vcf"> 
  <button class="btn btn-outline-primary" type="button"><i class="bi bi-upload" aria-hidden="true"></i> Upload</button>
</div>

11Document requirements

A checklist of requirements next to the upload control.

Proof of address

Utility bill or bank statement from the last 3 months
Your full name and address must be visible
PDF, JPG or PNG, max 5 MB

Choose document

<div class="card">
  <div class="card-body">
    <h3 class="h6"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i> Proof of address</h3>
    <ul class="small text-body-secondary ps-3">
      <li>Utility bill or bank statement from the last 3 months</li>
      <li>Your full name and address must be visible</li>
      <li>PDF, JPG or PNG, max 5 MB</li>
    </ul>
    <label for="fu-id-doc-684" class="form-label small fw-semibold">Choose document</label>
    <input type="file" class="form-control" id="fu-id-doc-684" accept=".pdf,image/*">
  </div>
</div>

12Compact drop zone

A slim single-line zone for forms with little space.

Drop a file or click to choose (max 2 MB)

<div class="tl-dropzone d-flex align-items-center gap-3 p-3 position-relative" data-demo-dropzone>
  <span class="fs-4 text-primary"><i class="bi bi-paperclip" aria-hidden="true"></i></span> 
  <div class="flex-grow-1">
    <span class="fw-semibold">Drop a file</span> <span class="text-body-secondary small">or click to choose (max 2 MB)</span> 
    <ul class="list-unstyled small mb-0" data-demo-filelist>
    </ul>
  </div>
  <label for="fu-compact-685" class="visually-hidden">Choose file</label>
  <input type="file" id="fu-compact-685" class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor: pointer;">
</div>

13Gallery upload

Thumbnails of uploaded images with a dashed Add tile at the end.

Add

<div class="row row-cols-3 row-cols-sm-4 g-2">
  <div class="col">
    <div class="position-relative">
      <img src="https://images.unsplash.com/photo-1758599668356-c8c919e24dda?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 1" class="img-fluid rounded">
      <button type="button" class="btn btn-sm btn-light position-absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 1"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <div class="position-relative">
      <img src="https://images.unsplash.com/photo-1758599668356-c8c919e24dda?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 2" class="img-fluid rounded">
      <button type="button" class="btn btn-sm btn-light position-absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 2"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <div class="position-relative">
      <img src="https://images.unsplash.com/photo-1758599668429-121d54188b9c?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 3" class="img-fluid rounded">
      <button type="button" class="btn btn-sm btn-light position-absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 3"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <label for="fu-gallery-686" class="tl-add-tile d-flex flex-column align-items-center justify-content-center rounded h-100 text-body-secondary"><i class="bi bi-plus-lg" aria-hidden="true"></i><span class="small">Add</span></label>
    <input type="file" id="fu-gallery-686" class="visually-hidden" accept="image/*" multiple>
  </div>
</div>

14Uploaded files list

Type icons, size, time and actions for every uploaded file.

brief-workflow.docx
184 KB - uploaded 43 min ago
assets.zip
12.8 MB - uploaded yesterday
walkthrough.mp4
48.2 MB - uploaded yesterday
config.json
6 KB - uploaded just now

<ul class="list-group">
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-primary"><i class="bi bi-file-earmark-word-fill" aria-hidden="true"></i></span><div class="flex-grow-1 min-w-0"><div class="small fw-semibold text-truncate">brief-workflow.docx</div><div class="small text-body-secondary">184 KB - uploaded 43 min ago</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download brief-workflow.docx"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete brief-workflow.docx"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-warning"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="flex-grow-1 min-w-0"><div class="small fw-semibold text-truncate">assets.zip</div><div class="small text-body-secondary">12.8 MB - uploaded yesterday</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download assets.zip"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete assets.zip"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-danger"><i class="bi bi-file-earmark-play-fill" aria-hidden="true"></i></span><div class="flex-grow-1 min-w-0"><div class="small fw-semibold text-truncate">walkthrough.mp4</div><div class="small text-body-secondary">48.2 MB - uploaded yesterday</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download walkthrough.mp4"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete walkthrough.mp4"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-secondary"><i class="bi bi-file-earmark-code-fill" aria-hidden="true"></i></span><div class="flex-grow-1 min-w-0"><div class="small fw-semibold text-truncate">config.json</div><div class="small text-body-secondary">6 KB - uploaded just now</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download config.json"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete config.json"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></li>
</ul>

15Job application

A CV upload combined with the other fields of an application form.

<form class="row g-3">
  <div class="col-md-6">
    <label for="fu-cv-name-687" class="form-label">Full name</label>
    <input type="text" class="form-control" id="fu-cv-name-687" value="Theo Morgan">
  </div>
  <div class="col-md-6">
    <label for="fu-cv-email-688" class="form-label">Email</label>
    <input type="email" class="form-control" id="fu-cv-email-688" value="theo.morgan@example.com">
  </div>
  <div class="col-12">
    <label for="fu-cv-file-689" class="form-label">CV / resume <span class="text-danger">*</span></label>
    <input type="file" class="form-control" id="fu-cv-file-689" accept=".pdf,.doc,.docx" required> 
    <div class="form-text">
      PDF or Word, max 5 MB.
    </div>
  </div>
  <div class="col-12">
    <label for="fu-cv-letter-690" class="form-label">Cover letter <span class="text-body-secondary">(optional)</span></label>
    <input type="file" class="form-control" id="fu-cv-letter-690" accept=".pdf,.doc,.docx">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Apply as QA Engineer</button>
  </div>
</form>

16Camera capture

capture="environment" opens the back camera on phones - great for receipts.

Take a photo of your receipt

On a computer this opens the normal file picker.

<label for="fu-camera-691" class="btn btn-outline-primary w-100 py-3"><i class="bi bi-camera-fill" aria-hidden="true"></i> Take a photo of your receipt</label>
<input type="file" id="fu-camera-691" class="visually-hidden" accept="image/*" capture="environment"> 
<p class="small text-body-secondary mt-2 mb-0">On a computer this opens the normal file picker.</p>

17Upload error

An invalid state explains why the chosen file was rejected.

Logo

logo-final.png is 14 MB. The maximum size is 2 MB.

<label for="fu-error-692" class="form-label">Logo</label>
<input type="file" class="form-control is-invalid" id="fu-error-692" accept="image/svg+xml,image/png"> 
<div class="invalid-feedback">
  <i class="bi bi-x-octagon-fill" aria-hidden="true"></i> logo-final.png is 14 MB. The maximum size is 2 MB.
</div>

18Cover image upload

A wide image area with an overlay button to replace the cover.

Change cover

Recommended size 1600 x 700 px.

<div class="position-relative rounded-3 overflow-hidden">
  <img src="https://images.unsplash.com/photo-1557660559-42497f78035b?auto=format&fit=crop&w=1600&h=700&q=70" alt="Current cover image" class="w-100 d-block object-fit-cover" style="max-height: 14rem;"> 
  <div class="position-absolute bottom-0 end-0 m-3">
    <label for="fu-cover-693" class="btn btn-light btn-sm shadow-sm"><i class="bi bi-image-fill" aria-hidden="true"></i> Change cover</label>
    <input type="file" id="fu-cover-693" class="visually-hidden" accept="image/*">
  </div>
</div>
<p class="small text-body-secondary mt-2 mb-0">Recommended size 1600 x 700 px.</p>

19CSV import

A file picker followed by import options for spreadsheets.

Import donors

CSV file

First row contains column names

Skip duplicates

Separator

<div class="card">
  <div class="card-header fw-semibold">
    <i class="bi bi-filetype-csv" aria-hidden="true"></i> Import donors
  </div>
  <div class="card-body">
    <label for="fu-import-694" class="form-label">CSV file</label>
    <input type="file" class="form-control mb-3" id="fu-import-694" accept=".csv,text/csv"> 
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="fu-import-header-695" checked>
      <label class="form-check-label" for="fu-import-header-695">First row contains column names</label>
    </div>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" role="switch" id="fu-import-skip-696">
      <label class="form-check-label" for="fu-import-skip-696">Skip duplicates</label>
    </div>
    <label for="fu-import-sep-697" class="form-label">Separator</label>
    <select class="form-select w-auto" id="fu-import-sep-697">
      <option>Comma (,)</option>
      <option>Semicolon (;)</option>
      <option>Tab</option>
    </select>
  </div>
  <div class="card-footer text-end">
    <button type="button" class="btn btn-primary">Start import</button>
  </div>
</div>

20Dark drop zone

The drop zone inside a dark section uses the dark surface variables.

Drop your audio files

MP3 or WAV

<div class="p-3 rounded-3 bg-dark" data-ui-theme="dark">
  <div class="tl-dropzone text-center p-4 position-relative text-white" data-demo-dropzone>
    <div class="fs-2">
      <i class="bi bi-music-note-beamed" aria-hidden="true"></i>
    </div>
    <p class="mb-0">Drop your audio files</p>
    <p class="small text-white-50 mb-0">MP3 or WAV</p>
    <label for="fu-dark-698" class="visually-hidden">Upload audio</label>
    <input type="file" id="fu-dark-698" accept="audio/*" multiple class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor: pointer;"> 
    <ul class="list-unstyled small mt-2 mb-0" data-demo-filelist>
    </ul>
  </div>
</div>