Bootstrap Twitter input type file how to clear the file?

Question

I'm implementing option for the user in the form where they can select one of allowed files and upload. This feature interface is build in Bootstrap 3 and I found one of the blogs that helped me style the interface. However, I'm wondering if there is a good option to clear/remove selected file? In case if user decided not to upload the file how they can remove it? I would need like X delete button on the very right side. Also file has to be remove with JavaScript I guess. If anyone knows the way to achieve this please let me know. Here is my code example:

$("#frm_file").on("change", uploadFile);
function uploadFile() {
    var ftype = $(this).get(0).files[0].type,
        fname = $(this).get(0).files[0].name,
        fextension = fname.split('.').pop(), // Another way to get file extension: fname.substring(fname.lastIndexOf('.')+1);
        validExtensions = ["jpg","jpeg","png","gif","doc","docx","xls","xlsx","txt","pdf"];
        console.log(fname);
    $("#frm_filename").val(fname);
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
  <label class="control-label" for="file"><span class="label label-default">File:</span></label>
  <div class="input-group">
    <label class="input-group-btn">
                                                    <span class="btn btn-primary">
                                                        Browse&hellip; <input type="file" name="frm_file" id="frm_file" style="display: none;">
                                                    </span>
                                                </label>
    <input type="text" class="form-control" name="frm_filename" id="frm_filename" readonly>
  </div>
</div>

score 1 · Answer 1 · answered Nov 15 '18 at 15:06

1

Try something like

document.getElementById('frm_file').value = "";

If not, try this answer.

answered Nov 15 '18 at 15:06

elken

556
4
11

score 1 · Accepted Answer · answered Nov 15 '18 at 15:15

Here is a very basic example using the bootstrap button on the right hand side. This is practically taken from the bootstrap 3.7 website. https://getbootstrap.com/docs/3.3/css/#forms

    <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
  </div>
  <span id="clear" class="input-group-addon">X</span>
</div>

<script>
    Document.getElementById("clear").addEventListener("click", clearInput);

    Function clearInput(){
        Document.getElementById("clear").Value = "";
    }
</script>

score -1 · Answer 3 · answered Sep 04 '20 at 09:02

In case you're banging your head against a brick wall like I've been, if you're using the .custom-file-input option from Bootstrap 4.x, none of the many and varied ways of clearing your file input will work. As the docs describe, this class causes Bootstrap to "hide the default file <input> via opacity and instead style the <label>". So to clear it, this is what I did:

Given (from the Bootstrap docs):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Use:

var $input = $('#customFile')
$input.val(null);
$input.next('label').text('Choose file');

Bootstrap Twitter input type file how to clear the file?

3 Answers3