<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=" col-sm-6 col-xs-12"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="John Doe"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="johndoe@email.com"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Union</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="SAG/AFTRA"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="123-123-3322"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="24"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">City</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="Los Angeles"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Height</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="5'10"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Weight</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="150 lbs"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Waist</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="30"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Eyes</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="Brown"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Hair</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="Black"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Shoes</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="4"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Shirt</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword" placeholder="Small"> </div> </div> </form> </div> <div class="col-md-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"><strong>Submit Photos</strong></div> <div class="panel-body"> <!-- Standar Form --> <h4>Select from your device</h4> <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> <div class="form-inline"> <div class="form-group"> <input type="file" name="files[]" id="js-upload-files" multiple> </div> <button type="submit" class="btn btn-sm btn-info" id="js-upload-submit">Upload</button> </div> </form> <!-- Drop Zone --> <h4>Or drag and drop below</h4> <div class="upload-drop-zone" id="drop-zone"> Just drag and drop photos here </div> <!-- Progress Bar --> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> <!-- Upload Finished --> <div class="js-upload-finished"> <h3>Processed files</h3> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a> </div> </div> </div> </div> </div> <div class="col-md-12 col-xs-12"> <hr> <button type="submit" class="btn btn-primary btn-lg">Submit</button> </div>

/* layout.css Style */ .upload-drop-zone { height: 100px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 100px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; }

+ function($) { 'use strict'; // UPLOAD CLASS DEFINITION // ====================== var dropZone = document.getElementById('drop-zone'); var uploadForm = document.getElementById('js-upload-form'); var startUpload = function(files) { console.log(files) } uploadForm.addEventListener('submit', function(e) { var uploadFiles = document.getElementById('js-upload-files').files; e.preventDefault() startUpload(uploadFiles) }) dropZone.ondrop = function(e) { e.preventDefault(); this.className = 'upload-drop-zone'; startUpload(e.dataTransfer.files) } dropZone.ondragover = function() { this.className = 'upload-drop-zone drop'; return false; } dropZone.ondragleave = function() { this.className = 'upload-drop-zone'; return false; } }(jQuery);