JQuery File Upload Not Reseting

Question

I have a multiple file upload solution that is not clearing files once the "Reset" button is clicked on. Review the JSFIDDLE Demo solution. Here's the HTML:

<form id="ImageUpload" action="#">
  <div class="field" align="left">
    <h2 class="page-header">Upload your images</h3>
      <div class="form-group">
        <div class="file-loading">
          <input type="file" id="files" name="files[]" multiple />
        </div>
      </div>
  </div>
  <hr />
  <div class="text-center">
    <button type="submit" name="Submit" class="btn btn-success">Submit</button>
    <button type="reset" name="Reset" class="btn btn-danger">Reset</button>
  </div>
</form>

Here's the Javascript:

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

The desired outcome is to clear not only the number of selected files ("Choose Files" button) but also to clear the preview images.

The experience displayed below is the expected outcome, when the "Reset" button is pressed.

I would appreciate any help, thanks!

Answer 1

Add a function to your reset button click.

$("button[name='Reset']").click(function() {
    var $input = $("#files");
    // Clear your input file value
    $input.replaceWith($input.val('').clone(true));
    // Then clear the preview of the images
    $('.pip').html('');
});