How do I customize the file input to show selected file names nicely?

Asked on Jul 11, 2025

Answer

To customize the file input in Bootstrap 5 and display selected file names, you can use custom JavaScript to update a label or a text element with the file names. Below is a simple example of how to achieve this using Bootstrap's custom file input styling.

<!-- BEGIN COPY / PASTE -->
        <div class="mb-3">
            <label for="customFile" class="form-label">Upload your files</label>
            <input type="file" class="form-control" id="customFile" multiple>
            <div id="fileNames" class="mt-2"></div>
        </div>

        <script>
            document.getElementById('customFile').addEventListener('change', function() {
                const fileNames = Array.from(this.files).map(file => file.name).join(', ');
                document.getElementById('fileNames').textContent = fileNames || 'No files selected';
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

This example uses a file input with the `multiple` attribute to allow selecting multiple files.
The `change` event listener updates a `div` with the `id` of `fileNames` to display the selected file names.
If no files are selected, it shows 'No files selected'.

✅ Answered with Bootstrap 5 best practices.