JSFiddle - React, Tailwind, and code Playground
HTML
<label for="fileInput" >
<img id="imgFileUpload" class="classImgFileUpload" src="http://s8.postimg.org/3y5xzwps1/upload_photo_1.png">
<label>
<input type="file" id="fileInput"/></label>
CSS
#fileInput{opacity:0}
body{
background:cadetblue;
}
JavaScript
var onKeyPress = function(e)
{
if ( e.which === 105 )
{
var el = document.getElementById('fileInput');
simulateClick(el)
}
}.bind(this);
document.addEventListener('keypress', onKeyPress, false);
function eventFire(el){
if (el.fireEvent) {
el.fireEvent('onclick');
} else {
var evObj = document.createEvent('Events');
evObj.initEvent("click", true, false);
el.dispatchEvent(evObj);
}
}
function eventFire2(el){
// Firefox
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
el.dispatchEvent(event);
}
// IE
else if (el.click) {
el.click();
}
}
function simulateClick(el) {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
el.dispatchEvent(event);
}