Bootstrap File Uploder

In this example below you will see how to do a Bootstrap File Uploder with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ashrafron, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ashrafron ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


<div class="container" style="margin-top: 20px;">
  <div class="row">
    <div class="col-lg-6 col-sm-6 col-12">
      <div class="input-group">
        <span class="input-group-btn">
          <span class="btn btn-primary btn-file">
                        Browse&hellip; 
          <input type="file" multiple>
          </span>
        </span>
        <input type="text" class="form-control" readonly>
      </div>
    </div>

  </div>
</div>

/*Downloaded from https://www.codeseek.co/ashrafron/bootstrap-file-uploder-LLZjXR */
    .btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}


/*Downloaded from https://www.codeseek.co/ashrafron/bootstrap-file-uploder-LLZjXR */
    $(document).on('change', '.btn-file :file', function() {
  var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
});

$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;
        
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
        
    });
});

Comments