<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Upload Authorization</h4>
</div>
<div class="modal-body">
<div class="col-xs-12 col-md-12 ">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Choose File</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
<br>
<div class="form-group" style="margin-top: 15px;">
<div class="col-xs-12 col-md-6 ">
<!-- image-preview-filename input [CUT FROM HERE]-->
<label style="line-height: 2.5em;">Start Date</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Expiration Date" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="col-xs-12 col-md-6 ">
<!-- image-preview-filename input [CUT FROM HERE]-->
<label style="line-height: 2.5em;">Start Date</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Expiration Date" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Uploaded Authorizations</h3>
</div>
<div class="col col-xs-6 text-right">
<button type="button" class="btn btn-sm btn-primary btn-create" data-toggle="modal" data-target="#myModal">Create New</button>
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th class="hidden-xs">ID</th>
<th class="text-center">File Name</th>
<th class="text-center">Start Date</th>
<th class="text-center">End Date</th>
<th class="text-center"><em class="fa fa-cog"></em></th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidden-xs text-center">1</td>
<td align="center"><a href="#">Test File - 1</a></td>
<td align="center">05/1/2016</td>
<td align="center">05/2/2016</td>
<td align="center">
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
</tr>
<tr>
<td class="hidden-xs text-center">2</td>
<td align="center"><a href="#">Test File - 2</a></td>
<td align="center">05/1/2016</td>
<td align="center">05/2/2016</td>
<td align="center">
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
</tr>
<tr>
<td class="hidden-xs text-center">3</td>
<td align="center"><a href="#">Test File - 3</a></td>
<td align="center">05/1/2016</td>
<td align="center">05/2/2016</td>
<td align="center">
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
</tr>
<tr>
<td class="hidden-xs text-center">4</td>
<td align="center"><a href="#">Test File - 4</a></td>
<td align="center">05/1/2016</td>
<td align="center">05/2/2016</td>
<td align="center">
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div></div>
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
.panel-table .panel-body{
padding:0;
}
.panel-table .panel-body .table-bordered{
border-style: none;
margin:0;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {
text-align:center;
width: 100px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {
border-right: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {
border-left: 0px;
}
.panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td{
border-bottom: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr:first-of-type > th{
border-top: 0px;
}
.panel-table .panel-footer .pagination{
margin:0;
}
/*
used to vertically center elements, may need modification if you're not using default sizes.
*/
.panel-table .panel-footer .col{
line-height: 34px;
height: 34px;
}
.panel-table .panel-heading .col h3{
line-height: 30px;
height: 30px;
}
.panel-table .panel-body .table-bordered > tbody > tr > td{
line-height: 34px;
}
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
// Hover befor close the preview
});
$(function() {
// Create the close button
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
// Clear event
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
// Create the preview image
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
}
reader.readAsDataURL(file);
});
});
