JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="media-left text-center container22">
    <div class="image-container">
    <img src="http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg" style="width: 150px; height: 150px;" class="image1"></img>
  <a href="#" id="upfile1">
  <span style="font-size: 28px;" id="img-upload-bt" class="glyphicon glyphicon-camera"></span>
  </a>
    </div>
</div>
<input type="file" id="file1"  name="file1" style="display:none" />

CSS

.container22 {
   height: 10em;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
#upfile1 {
   margin-left: auto;
   margin-right: auto;
}
.image-container {
  position: relative;
}
#img-upload-bt {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -14px 0 0 -14px;
}

JavaScript

$(function() {
	$("#upfile1").click(function () {
		$("#file1").trigger('click');
	});
});