JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script type="text/template" id="file-template">
	<div class="row">
		<div class="col-md-12">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-md-3 control-label" for="logo">Logo</label>
					<div class="col-md-4">
						<img id="logo" name="logo" class="customerImg"/>
					</div>
					<span class="btn btn-default btn-file col-md-3">
						Browse another logo
						<input type="file" name="imageFile" fileread="customerLogo" />
					</span>
				</div>
			</form>
		</div>
	</div>
</script>

JavaScript

bootbox.dialog({
	title: "More information",
	message: $('#file-template').html(),
	buttons: {
		danger: {
			label: "Cancel",
			className: "btn btn-primary"
		},
		success: {
			label: "Generate word",
			className: "btn btn-primary",
			callback: function () {
				console.log(document.getElementById('logo').val());
			}
		}
	}
});