JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<body>


      <div class="row">
				<div class="form-group col-sm-3 col-sm-offset-2 col-xs-10">
					<input id="filename-upload" placeholder="Bild hochladen" disabled="disabled"/>
				</div>
				<div class="form-group mobile-col-1 col-xs-1">
					<label class="btn-file-upload">
						<span class="glyphicon glyphicon-file"></span>
						<input type="file" name="pictures" accept="image/*" hidden/>
					</label>
					<input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>
				</div>
				
				<div class="form-group col-sm-4 col-xs-12">
					<img id="preview" class="img-responsive img-preview" src="" alt=""/>
				</div>
			</div>
      
</body>

CSS

body {
  padding: 20px;  
}

input {
	font-family: 'Open Sans', sans-serif;
	outline: 0;
	background: #f2f2f2;
	width: 100%;
	border: 0;
	margin: 0 0 15px;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
}

select::-ms-expand {
	display: none;
}
select {
        -webkit-appearance: none;
        -moz-appearance: none;      
        appearance: none;
}
.btn-file-upload {
	background-color: transparent;
	color: red;
	font-size: 40px;
	margin: 0;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	cursor: pointer;
}

[hidden] {
  display: none !important;
}

JavaScript

$("input[type=file]").on('change', function() {
  $("#filename-upload").attr("placeholder", $('input[type=file]').val().split('\\').pop());
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $("#preview").attr("src", e.target.result).removeAttr("hidden");
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("input[type=file]").change(function(){
  readURL(this);
});