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.

Basic example

example placeholder
example placeholder
Edit in sandbox 
        
            
                <!--Image-->
                <div>
                    <div class="mb-4 d-flex justify-content-center">
                        <img src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" 
                        alt="example placeholder" style="width: 300px;" />
                    </div>
                    <div class="d-flex justify-content-center">
                        <div 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" />
                        </div>
                    </div>
                </div>

                <!--Avatar-->
                <div>
                    <div class="d-flex justify-content-center mb-4">
                        <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" 
                        class="rounded-circle" alt="example placeholder" style="width: 200px;" />
                    </div>
                    <div class="d-flex justify-content-center">
                        <div 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" />
                        </div>
                    </div>
                </div>