JSFiddle - React, Tailwind, and code Playground

by MadhawaMB

HTML

<div class="container">
		<span class="btn btn-success fileinput-button">
			<i class="glyphicon glyphicon-plus"></i>
			<span >Add files...</span>
            <input id="fileupload" type="file" name="files[]" multiple  onchange="loadFile(event)"> 
		</span>
		<br />
		<div class="progress" style="width:500px;">
			

            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                100% Complete (success)
            </div>
		</div>
		<br />
		<div class="file_name"></div>
		<br />
		<div class="file_type"></div>
		<br />
		<div class="file_size"></div>
            <img  id="output" style="width:200px; height:200px;"/></div>

CSS

.hidden {
    display: none;
}

JavaScript

<script type="text/javascript">
	$(document).ready(function () {
		$('#fileupload').fileupload({
			dataType: 'json',
			url: '/Home/UploadFiles',
			autoUpload: true,
			done: function (e, data) {
				$('.file_name').html(data.result.name);
				$('.file_type').html(data.result.type);
				$('.file_size').html(data.result.size);

			}
		}).on('fileuploadprogressall', function (e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$('.progress .progress-bar').css('width', progress + '%');
		});
	});
</script>

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>




        <script>$("#output")
    .attr('rel', 'output')
    .fancybox({
        padding: 0
    });</script>
	</div>