JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<input id="image1" type="file" name="image">
<input id="image2" type="file" name="image">
<input id="image3" type="file" name="image">
</form>
<button id="test">Remove selected file</button>
JavaScript
$('#test').click(function () {
$("[type='file']").clearFiles();
console.log($('#image').val());
});
$.fn.extend({
clearFiles: function () {
$(this).each(function () {
var isIE = (window.navigator.userAgent.indexOf("MSIE ") > 0 || !! navigator.userAgent.match(/Trident.*rv\:11\./));
if ($(this).prop("type") == 'file') {
if (isIE == true) {
$(this).replaceWith($(this).val('').clone(true));
} else {
$(this).val("");
}
}
});
return this;
}
});