.btn:focus, .upload-btn:focus{
  outline: 0 !important;
}

html,
body {
  height: 100%;
  background-color: #4791D2;
}

body {
  text-align: center;
  font-family: 'Raleway', sans-serif;
}

.row {
  margin-top: 80px;
}

.upload-btn {
  color: #ffffff;
  background-color: #F89406;
  border: none;
}

.upload-btn:hover,
.upload-btn:focus,
.upload-btn:active,
.upload-btn.active {
  color: #ffffff;
  background-color: #FA8900;
  border: none;
}

h4 {
  padding-bottom: 30px;
  color: #B8BDC1;
}

.glyphicon {
  font-size: 5em;
  color: #9CA3A9;
}

h2 {
  margin-top: 15px;
  color: #68757E;
}

.panel {
  padding-top: 20px;
  padding-bottom: 20px;
}

#upload-input {
  display: none;
}

@media (min-width: 768px) {
  .main-container {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .container {
    width: 450px;
  }
}

$('.upload-btn').on('click', function (){
    $('#upload-input').click();
  
      $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
});

$('#upload-input').on('change', function(){

  var files = $(this).get(0).files;

  if (files.length > 0){
    var formData = new FormData();
    
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      formData.append('uploads[]', file, file.name);
    }
  }
  
  console.log(formData.values());

  $.ajax({
      url: 'https://ui-coffee-club-api.herokuapp.com/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!\n' + data);
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {

          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);

            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');

            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }

          }

        }, false);

        return xhr;
      }
    });
  
});