how to add a remove icon to file uploading in html forms

Question

I developed a form for file uploading. now I want to add a remove icon to remove the uploaded file in UI. please provide me a solution with remove the function. Thank you.

        <div class="form-group row">
            <label class="col-md-5 col-form-label">attachment</label>
            <div class="col-md-7">
                <input type="file" class="form-control" id="file" name="file"><br><br>
            </div>
        </div>

Answer 1

if using bootstrap 5 :
add file bootstrap-icons.css

<div class="input-group">
    <label class="col-md-5 col-form-label">attachment</label>
    <input type="file" class="form-control" id="file" name="file" />
    <button class="btn btn-outline-secondary" type="button"><i class="bi bi-trash3"></i></button>
</div>