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>

Answer 2

If I add a file to the control the Change event is fired. In all other cases the change event is not fired

and

it is impossible to reset the input file. The change event is never fired

The issue here is that UI events (click, change) only fire from UI actions (the user clicking or making a change to the control)

Code actions such as calling .val() is not a UI action so doesn't raise an event.

You can raise/trigger an event via code if/when you need one, eg

$("#id").val('').change()

---

In this specific case, OPs .val('') is working, but they have it hidden behind a UX wrapper so cannot see the input type=file changing instead relying on the change event to update the wrapper. As the change event doesn't fire from .val('') the wrapper is not being updated so it gives the appearance of not updating.