Looking for assistance with my file uploading system. I am utilizing a unique purple button from http://tympanus.net/Development/CreativeButtons/ (Scroll down to find the purple buttons).
Additionally, I am using a wide, short content popup feature available at http://codepen.io/ksondere/pen/tAIrl (Includes JS code and HTML and CSS source codes).
<form id="fileupload" action="<?php echo site_url( $user->userURL.'/upload' ) ?>" method="POST" enctype="multipart/form-data">
<div id="wrap">
<div id="main">
<div id="droparea">
<div class="empty-folder-contents density-tiny">
<div class="empty-folder-circle"></div>
<div class="drop-file-icon drive-sprite-aux-image-gray"></div>
<div class="drop-target-contents-text drop-target-contents-inactive">
<div class="fileinner">
<img class="file" src="img/icon/file.png" />
<p>
<label for="upload" class="btn btn-5 btn-5b icon-plus">Upload File</label>
<input style="opacity:0" type="file" name="files[]" id="upload" multiple>
</p>
<div class="drop-target-contents-main-title">or</br></br>drag files here!</div>
</div>
</div>
</div>
</div>
</div>
<div id="shortModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">File Upload</h4>
</div>
<div class="progress progress-danger progress-striped active">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
<div class="fileupload-loading"></div>
<br>
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</div>
</div>
</div>
</form>
</div>
<script style="display: none;">var __links = document.querySelectorAll('label');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
</script>
<?php endif; ?>
If I click on the purple button, I expect an automatic pop-up displaying upload progress bars and file names.
Best regards, KLDesigns,