File input image

Bootstrap 5 File input image component

Responsive File input image built with Bootstrap 5. An example of bootstrap file upload. Easy to implement and customize. Examples of basic and advanced usage.

Note info: If you need more advanced functionalities, have a look at our Drag and drop file upload plugin.

Use a file input element. If you want this element to look like a button, put it in a div with button classes like .btn .btn-color. Then add the class d-none in the input element.

If you want the selected file to be displayed, add an image as a placeholder and use the provided JS code.

Basic example

example placeholder
example placeholder
Edit in sandbox 
        
            
                <!--Image-->
                <div>
                    <div class="mb-4 d-flex justify-content-center">
                        <img id="selectedImage" src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg"
                        alt="example placeholder" style="width: 300px;" />
                    </div>
                    <div class="d-flex justify-content-center">
                        <div data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-rounded">
                            <label class="form-label text-white m-1" for="customFile1">Choose file</label>
                            <input type="file" class="form-control d-none" id="customFile1" onchange="displaySelectedImage(event, 'selectedImage')" />
                        </div>
                    </div>
                </div>

                <!--Avatar-->
                <div>
                    <div class="d-flex justify-content-center mb-4">
                        <img id="selectedAvatar" src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg"
                        class="rounded-circle" style="width: 200px; height: 200px; object-fit: cover;" alt="example placeholder" />
                    </div>
                    <div class="d-flex justify-content-center">
                        <div data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-rounded">
                            <label class="form-label text-white m-1" for="customFile2">Choose file</label>
                            <input type="file" class="form-control d-none" id="customFile2" onchange="displaySelectedImage(event, 'selectedAvatar')" />
                        </div>
                    </div>
                </div>
                
        
    
        
            
                function displaySelectedImage(event, elementId) {
                    const selectedImage = document.getElementById(elementId);
                    const fileInput = event.target;
                
                    if (fileInput.files && fileInput.files[0]) {
                        const reader = new FileReader();
                
                        reader.onload = function(e) {
                            selectedImage.src = e.target.result;
                        };
                
                        reader.readAsDataURL(fileInput.files[0]);
                    }
                }