client-side check for a .tar.gz extension

cms/static/js/base.js

@@ -80,11 +80,17 @@ $(document).ready(function() {
 });
 
 function showImportSubmit(e) {
-    $('.file-name').html($(this).val())
-    $('.file-name-block').show();
-    $('.import .choose-file-button').hide();
-    $('.submit-button').show();
-    $('.progress').show();
+    var filepath = $(this).val();
+    if(filepath.substr(filepath.length - 6, 6) == 'tar.gz') {
+        $('.error-block').hide();
+        $('.file-name').html($(this).val());
+        $('.file-name-block').show();
+        $('.import .choose-file-button').hide();
+        $('.submit-button').show();
+        $('.progress').show();    
+    } else {
+        $('.error-block').html('File format not supported. Please upload a file with a <code>tar.gz</code> extension.').show();
+    }
 }
 
 function syncReleaseDate(e) {

cms/static/sass/_import.scss

@@ -11,11 +11,15 @@
     margin-right: 3%;
     font-size: 14px;
 
-    h3 {
+    h2 {
+      font-weight: 700;
+      font-size: 19px;
       margin-bottom: 20px;
-      font-size: 18px;
+    }
+
+    strong {
       font-weight: 700;
-      color: $error-red;
+      // color: $error-red;
     }
 
     p + p {
@@ -39,12 +43,17 @@
       font-weight: 300;
     }
 
-    .file-name-block {
+    .file-name-block,
+    .error-block {
       display: none;
       margin-bottom: 15px;
       font-size: 13px;
     }
 
+    .error-block {
+      color: $error-red;
+    }
+
     .choose-file-button {
       @include blue-button;
       padding: 10px 50px 11px;

cms/templates/import.html

@@ -11,15 +11,17 @@
     <h1>Import</h1>
     <article class="import-overview">
       <div class="description">
-        <h3>Importing a new course will delete all course content currently associated with your course
-        and replace it with the contents of the uploaded file.</h3>
+        <h2>Please <a href="#">read the documentation</a> before attempting an import!</h2>
+        <p><strong>Importing a new course will delete all content currently associated with your course
+        and replace it with the contents of the uploaded file.</strong></p>
         <p>File uploads must be zip files containing, at a minimum, a <code>course.xml</code> file.</p>
         <p>Please note that if your course has any problems with auto-generated <code>url_name</code> nodes,
         re-importing your course could cause the loss of student data associated with those problems.</p>
       </div>
       <form action="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="import-form">
         <h2>Course to import:</h2>
-        <a href="#" class="choose-file-button">Choose File</a>
+        <p class="error-block"></p>
+        <a href="#" class="choose-file-button">Choose File</a>        
         <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">change</a></p>
         <input type="file" name="course-data" class="file-input">
         <input type="submit" value="Replace my course with the one above" class="submit-button">