JSFiddle - React, Tailwind, and code Playground
HTML
<form id="imageUploadForm" method="post" action="/image/upload" enctype="multipart/form-data">
<label id="imageUploadLabel" for="imageUpload" class="button">Upload Picture</label>
<input id="imageUpload" class="show" type="file" accept="image/*" name="file" multiple />
<br/>
<label id="imageUploadLabel2" for="imageUpload2" class="button">Upload Picture 2</label>
<input id="imageUpload2" class="hidden" type="file" accept="image/*" capture="camera" name="file">
</form>
CSS
input.show {
position: fixed;
left: 1000%;
}
input.hidden {
display: none;
}
JavaScript
if($.browser.mozilla) {
$(document).on('click', 'label', function(e) {
if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
$(this.control).click();
}
});
}