import-course.html

<%! from django.core.urlresolvers import reverse %>

<section>
  <div class="course-upload">
    You can import an existing .tar.gz file of your course
    <form action="${reverse('import_course')}" method="post" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="Upload File">
    </form>
    <div class="progress" style="position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px;">
      <div class="bar" style="background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px;"></div>
      <div class="percent">0%</div>
    </div>

    <div id="status"></div>
  </div>

</section>

<script>
require(["domReady!", "jquery", "jquery.form"], function(doc, $) {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
      status.html(xhr.responseText);
    }
});

}); // end require();
</script>