File Upload

This does not include all of the javascript required to make this work. The javascript on this page is only so you can see the transition states.

See example: File Upload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CLUI</title>
    <link rel="shortcut icon" href="static/favicon.png"/>

    <!-- CSS to be documented -->
    <link rel="stylesheet" href="css/corelogic-ui.css">

    <!-- Main libraries -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/corelogic-ui.js"></script>
    <script src="static/js/upload.js"></script>
</head>
<body>
<nav class="navbar navbar-default nav" role="navigation">
    <div class="mobile-search">
        <div class="mobile-search-overlay"></div>
        <div class="mobile-searchbar">
            <i class="fa fa-search"></i>
            <form name="mobileForm">
                <input type="text" class="navbar-search" placeholder="Search something...">
            </form>
            <i class="fa fa-times"></i>
        </div>
    </div>
    <div class="container-fluid">
        <div class="navbar-collapse-btn">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-collapse-3">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
        </div>
        <button type="button" class="navbar-mobile-search">
            <i class="fa fa-search" aria-hidden="true"></i>
        </button>

        <div class="navbar-header">
            <div class="navbar-logo"></div>
            <div class="application-name">
                <h1>CoreLogic UI</h1>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse-3">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                <li><a href="/components_-_forms.html?page=forms">Back To CLUI</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid container-full container-background vertical-parent">
    <div class="vertical-center">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-md-offset-3">
                <div class="panel panel-default scrollable">
                    <div class="panel-heading">
                        <div class="panel-title">Upload a File</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group form-group-lg">
                                <div class="input-group">
                                    <form class="form-group" name="uploadForm" id="uploadForm">
                                        <div class="upload-container">
                                            <input type="file" multiple="multiple" class="uploadInput">
                                            <div class="upload-components">
                                                <i class="fa fa-cloud-upload"></i>
                                                <h2 class="uploadMessage">Drag and drop file here to upload, or click below</h2>
                                                <h2 class="dragMessage">Drop File Here</h2>
                                                <button type="button" class="btn btn-default"><i class="fa fa-upload"> </i> Upload File</button>
                                                <div class="uploadProgress">
                                                    <h2 class="fileName"></h2>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-bar-upload" role="progressbar"
                                                             aria-valuenow="20"
                                                             aria-valuemin="0" aria-valuemax="100" value="20">
                                                            <span class="sr-only">20% Complete</span>
                                                        </div>
                                                    </div>
                                                    <h5 class="uploadingMessage">Uploading...</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upload-container mg-tp-15">
                                            <input type="file" multiple="multiple" class="uploadInput">
                                            <div class="upload-components">
                                                <i class="fa fa-cloud-upload"></i>
                                                <h2 class="uploadMessage">Drag and drop file here to upload, or click below</h2>
                                                <h2 class="dragMessage">Drop File Here</h2>
                                                <button type="button" class="btn btn-default"><i class="fa fa-upload"> </i> Upload File</button>
                                                <div class="uploadProgress">
                                                    <h2 class="fileName"></h2>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-bar-upload" role="progressbar" aria-valuenow="60"
                                                             aria-valuemin="0" aria-valuemax="100" value="60">
                                                            <span class="sr-only">60% Complete</span>
                                                        </div>
                                                    </div>
                                                    <h5 class="uploadingMessage">Uploading...</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upload-container mg-tp-15">
                                            <input type="file" multiple="multiple" class="uploadInput">
                                            <div class="upload-components">
                                                <i class="fa fa-cloud-upload"></i>
                                                <h2 class="uploadMessage">Drag and drop file here to upload, or click below</h2>
                                                <h2 class="dragMessage">Drop File Here</h2>
                                                <button type="button" class="btn btn-default"><i class="fa fa-upload"> </i> Upload File</button>
                                                <div class="uploadProgress">
                                                    <h2 class="fileName"></h2>
                                                    <div class="progress">
                                                        <div class="progress-bar progress-bar-upload"
                                                             role="progressbar" aria-valuenow="80"
                                                             aria-valuemin="0" aria-valuemax="100" value="80">
                                                            <span class="sr-only">80% Complete</span>
                                                        </div>
                                                    </div>
                                                    <h5 class="uploadingMessage">Uploading...</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-default mg-tp-15">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        uploadInit();
    });
</script>
</body>
</html>