JSFiddle - React, Tailwind, and code Playground
HTML
<form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data">
<input id="myfile" type="file" class="file" name="file" style="display:none" />
<img type="image" name="img" src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-100d-sample-photo.jpg">
</form>
JavaScript
function reset_form_element (e) {
e.wrap('<form>').parent('form').trigger('reset');
e.unwrap();
}
$('img[name=img]').click(function () {
$('input[name=file]').click();
});
$(".attachmentsUpload input.file").on("change", function (e) {
if ($(".attachmentsUpload input.file").val() == "") {
return;
}
// your ajax submit
alert("submit value of the file input field=" + $(".attachmentsUpload input.file").val());
reset_form_element( $('#myfile') );
e.preventDefault();
});