Twitter Bootstrap Question posted in

Bootstrap Twitter input type file how to clear the file?-Twitter bootstrap

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>
Tags:

3

Answers


  1. 0

    Try something like

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

    If not, try this answer.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search