From e7088d50fdcbd4c811ee14a13e0cf93e5540dbc8 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Tue, 2 Jul 2013 11:12:11 -0400
Subject: [PATCH] Display error message when trying to upload a non-PDF file as
 a PDF textbook

---
 cms/static/js/views/textbook.js           | 17 +++++++----------
 cms/templates/js/upload-dialog.underscore |  4 ++--
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/cms/static/js/views/textbook.js b/cms/static/js/views/textbook.js
index 7a14cc3262..52fcb11b76 100644
--- a/cms/static/js/views/textbook.js
+++ b/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({
diff --git a/cms/templates/js/upload-dialog.underscore b/cms/templates/js/upload-dialog.underscore
index bf1bede89c..3aaaf57e29 100644
--- a/cms/templates/js/upload-dialog.underscore
+++ b/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">