Bootstrap 5 file upload inputs let users select files from their device. This page covers 4 file upload patterns — basic, multiple files, drag and drop zone and image preview — each ready to use in your forms.
Quick Setup
File inputs need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class / Attribute | What It Does |
|---|---|
.form-control | Styles the file input |
.form-control-sm | Small file input |
.form-control-lg | Large file input |
type="file" | Creates file input element |
multiple | Allows selecting multiple files |
accept="image/*" | Restricts to image files |
accept=".pdf,.doc" | Restricts to specific extensions |
1. Basic Bootstrap 5 File Input
Standard file inputs in default, small and large sizes using form-control.
2. Bootstrap 5 Multiple File Upload
Allow uploading multiple files at once using the multiple attribute. Restrict file types with accept.
3. Bootstrap 5 Drag and Drop Upload Zone
A styled drag-and-drop upload area. Files can be dragged in or selected via click.
4. Bootstrap 5 File Upload with Image Preview
File input that shows a preview of the selected image before upload.
Frequently Asked Questions
Use the accept attribute on the input: accept='image/*' for all images, accept='.pdf,.doc' for specific extensions, accept='image/png,image/jpeg' for specific MIME types. Note this is a client-side hint only — always validate file types server-side too.
Listen to the change event: input.addEventListener('change', function() { label.textContent = this.files[0]?.name || 'No file chosen'; }). Or use the input-group with a label button and file input styled to show the filename dynamically.
Check the file size in the change event handler: input.addEventListener('change', function() { if(this.files[0].size > 5 * 1024 * 1024) { this.classList.add('is-invalid'); feedback.textContent = 'File must be under 5MB'; this.value = ''; } }). Always validate server-side as well.
Use FormData and Fetch API: const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('/upload', { method: 'POST', body: formData }).then(r => r.json()). No Content-Type header needed — browser sets it automatically with the boundary.
Hide the default input and trigger it from a styled button: <input type='file' class='d-none' id='fileInput'><button onclick='document.getElementById("fileInput").click()' class='btn btn-primary'>Choose File</button>. Listen to the hidden input's change event to show the filename.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.