Display error message when trying to upload a non-PDF file as a PDF textbook

cms/static/js/views/textbook.js

@@ -269,10 +269,9 @@ CMS.Views.UploadDialog = Backbone.View.extend({
     initialize: function() {
         this.template = _.template($("#upload-dialog-tpl").text());
         this.listenTo(this.model, "change", this.render);
-        this.listenTo(this.model, "invalid", this.handleInvalid);
     },
     render: function() {
-        if(!this.model.isValid()) {return this;}
+        var isValid = this.model.isValid()
         var selectedFile = this.model.get('selectedFile');
         var oldInput = this.$("input[type=file]").get(0);
         this.$el.html(this.template({
@@ -287,12 +286,15 @@ CMS.Views.UploadDialog = Backbone.View.extend({
             finished: this.model.get('finished'),
             error: this.model.validationError
         }));
-        // ideally, we'd like to tell the browser to pre-populate the
+        // Ideally, we'd like to tell the browser to pre-populate the
         // <input type="file"> with the selectedFile if we have one -- but
         // browser security prohibits that. So instead, we'll swap out the
         // new input (that has no file selected) with the old input (that
-        // already has the selectedFile selected).
-        if (selectedFile) {
+        // already has the selectedFile selected). However, we only want to do
+        // this if the selected file is valid: if it isn't, we want to render
+        // a blank input to prompt the user to upload a different (valid) file.
+        if (selectedFile && isValid) {
+            $(oldInput).removeClass("error");
             this.$('input[type=file]').replaceWith(oldInput);
         }
         return this;
@@ -323,11 +325,6 @@ CMS.Views.UploadDialog = Backbone.View.extend({
         if(e && e.preventDefault) { e.preventDefault(); }
         return this.hide().remove();
     },
-    handleInvalid: function(model, error, options) {
-        model.set({
-            selectedFile: null
-        });
-    },
     upload: function(e) {
         this.model.set('uploading', true);
         this.$("form").ajaxSubmit({

cms/templates/js/upload-dialog.underscore

@@ -11,11 +11,11 @@
   <h2 class="title"><%= title %></h2>
   <% if(error) {%>
   <div id="upload_error" class="message message-status message-status error is-shown" name="upload_error">
-      <p><%= error %></p>
+      <p><%= gettext(error.message) %></p>
     </div>
   <% } %>
   <p id="dialog-assetupload-description" class="message"><%= message %></p>
-  <input type="file" name="file" />
+  <input type="file" name="file" <% if(error && error.attributes && error.attributes.selectedFile) {%>class="error"<% } %> />
 
     <div class="status-upload">