Drag and Drop File Upload

REQUIRES JAVASCRIPT
You will need to write your own javascript for this to function. You can use the example below as a starting point.

Base Drag and Drop File Upload

Drag a file over the dashed box below to see an example of how it might look. This is only a demo of the CSS states.

To view an example with multiple upload blocks, please visit the sample upload page.

Drag and drop file here to upload, or click below

Drop File Here

0% Complete
Uploading...
<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-bright-blue" role="progressbar"
                     aria-valuenow="0"
                     aria-valuemin="0" aria-valuemax="100" value="0">
                    <span class="sr-only">0% Complete</span>
                </div>
            </div>
            <h5 class="uploadingMessage">Uploading...</h5>
        </div>
    </div>
</div>

Example javascript starting point:

function uploadInit() {
    $('.upload-container').each(function() {
      var $upload = $(this).find('.upload-components'),
        droppedFiles = false,
        self = $(this);

      // Hook up the "Upload File" button to the hidden file input.
      $upload.find('.btn').on('click', function() {
        self.find('.uploadInput').click();
        self.on('change', function(e) {
          droppedFiles = e.target.files || e.dataTransfer.files;
          $(this).addClass('uploading');
          $(this).find('.fileName').html(droppedFiles[0].name);
          // This is how to set the progress bar position. We're randomly setting it here.
          $(this).find('.progress-bar').css('width', (Math.floor(Math.random() * 100) + 1) + '%');
      });
    });

    // This counter takes care of child events so they don't trigger dragleave/dragenter events and a lot of flickering.
    var counter = 0;

    $(this).on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
      e.preventDefault();
      e.stopPropagation();
    }).on('dragover', function() {
      $(this).addClass('dragover');
    }).on('dragenter', function() {
      counter++;
      $(this).addClass('dragover');
    }).on('dragleave', function() {
      counter--;
      if (counter === 0) {
      $(this).removeClass('dragover');
    }
    }).on('dragend drop', function() {
      $(this).removeClass('dragover');
    }).on('drop', function(e) {
      droppedFiles = e.originalEvent.files || e.originalEvent.dataTransfer.files;
      $(this).addClass('uploading');
      $(this).find('.fileName').html(droppedFiles[0].name);

      // This is how to set the progress bar position. We're randomly setting it here.
      $(this).find('.progress-bar').css('width', (Math.floor(Math.random() * 100) + 1) + '%');

      //Do stuff with the file
    });
  });
}