Reset or clear a input type file field

Question

I use a upload form / group in my page. This works well. But it is not possible to add a reset/clear function to this. my control is:

          <div id="uploadform" style="width:100%;" data-provides="fileupload">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                  <label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
                  </div>
                  <div class="custom-file" >
                    <input type="file" name="sampleFile" class="custom-file-input" id="inputGroupFile01">
                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                  </div>
                    <div class="input-group-append">
                     <button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
                    </div>
                </div>

          </div>

I have a function to detect on change events

    $('#inputGroupFile01').on('change',function(e){
        console.log("onchange");
        //get the file name
        var fileName = e.target.files[0].name;
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(fileName);
    });

The file selection and the label are all ok, but it is impossible to reset the input file. The change event is never fired. I moved the reset to the upload button

    $( '#fileupload' ).click(function() {
        console.log("Upload");
        $('#inputGroupFile01').val('');
        return;

But also no effect. I also tried to use all inside a form tag and to call this.form.reset(). No effect. Iam really confused. I think the change event is never fired because the input typ="file" is never cleared / resented? Any idea?

Additional Info: If I add a file to the control. Change event is fired. In all other cases the change event is not fired. Not with $('#inputGroupFile01').val(''); nor with this.form.reset();

Answer 1

This code snippet will help you

$("#clear").click(function() {  
  $("#inputGroupFile01").val('');
  console.log("clear field", $("#inputGroupFile01").val())
})
$("#fileupload").click(function() {
  console.log("current url is", $("#inputGroupFile01").val())
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <div id="uploadform" style="width:100%;" data-provides="fileupload">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                  <label class="input-group-text"><i class="fas fa-folder-plus"></i></label>
                </div>
                <div class="custom-file" >
                    <input type="file" name="sampleFile"  class="custom-file-input" id="inputGroupFile01">
                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                </div>
                <div class="input-group-append">
                     <button type="button" id="fileupload" class="btn btn-primary">Upload!</button>
                      <button type="button" id="clear" class="btn btn-primary">Clear!</button>
             </div>
         </div>
    </div>