PDF textbook upload: show success message for 2 seconds following successful upload

cms/static/coffee/spec/models/textbook_spec.coffee

@@ -140,6 +140,12 @@ describe "CMS.Models.FileUpload", ->
     beforeEach ->
         @model = new CMS.Models.FileUpload()
 
+    it "is unfinished by default", ->
+        expect(@model.get("finished")).toBeFalsy()
+
+    it "is not uploading by default", ->
+        expect(@model.get("uploading")).toBeFalsy()
+
     it "is valid by default", ->
         expect(@model.isValid()).toBeTruthy()
 

cms/static/coffee/spec/views/textbook_spec.coffee

@@ -340,9 +340,9 @@ describe "CMS.Views.UploadDialog", ->
         request.respond(200, {"Content-Type": "application/json"},
                 '{"displayname": "starfish", "url": "/uploaded/starfish.pdf"}')
         expect(@model.get("uploading")).toBeFalsy()
+        expect(@model.get("finished")).toBeTruthy()
         expect(@chapter.get("name")).toEqual("starfish")
         expect(@chapter.get("asset_path")).toEqual("/uploaded/starfish.pdf")
-        expect(@view.remove).toHaveBeenCalled()
 
     it "can handle upload errors", ->
         @view.upload()
@@ -350,3 +350,46 @@ describe "CMS.Views.UploadDialog", ->
         expect(@model.get("title")).toMatch(/error/)
         expect(@view.remove).not.toHaveBeenCalled()
 
+describe "CMS.Views.UploadDialog timing", ->
+    tpl = readFixtures("upload-dialog.underscore")
+
+    beforeEach ->
+        setFixtures($("<script>", {id: "upload-dialog-tpl", type: "text/template"}).text(tpl))
+        appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(feedbackTpl))
+        window.UPLOAD_ASSET_CALLBACK_URL = "/upload"
+        @requests = requests = []
+        @xhr = sinon.useFakeXMLHttpRequest()
+        @xhr.onCreate = (xhr) -> requests.push(xhr)
+
+        @model = new CMS.Models.FileUpload()
+        @chapter = new CMS.Models.Chapter()
+        @view = new CMS.Views.UploadDialog({model: @model, chapter: @chapter})
+        spyOn(@view, 'remove').andCallThrough()
+
+        # create mock file input, so that we aren't subject to browser restrictions
+        @mockFiles = []
+        mockFileInput = jasmine.createSpy('mockFileInput')
+        mockFileInput.files = @mockFiles
+        jqMockFileInput = jasmine.createSpyObj('jqMockFileInput', ['get', 'replaceWith'])
+        jqMockFileInput.get.andReturn(mockFileInput)
+        realMethod = @view.$
+        spyOn(@view, "$").andCallFake (selector) ->
+            if selector == "input[type=file]"
+                jqMockFileInput
+            else
+                realMethod.apply(this, arguments)
+
+        @clock = sinon.useFakeTimers()
+
+    afterEach ->
+        delete window.UPLOAD_ASSET_CALLBACK_URL
+        @xhr.restore()
+        @clock.restore()
+
+    it "removes itself after two seconds on successful upload", ->
+        @view.upload()
+        @requests[0].respond(200, {"Content-Type": "application/json"},
+                '{"displayname": "starfish", "url": "/uploaded/starfish.pdf"}')
+        expect(@view.remove).not.toHaveBeenCalled()
+        @clock.tick(2001)
+        expect(@view.remove).toHaveBeenCalled()

cms/static/js/models/textbook.js

@@ -97,7 +97,8 @@ CMS.Models.FileUpload = Backbone.Model.extend({
         "selectedFile": null,
         "uploading": false,
         "uploadedBytes": 0,
-        "totalBytes": 0
+        "totalBytes": 0,
+        "finished": false
     },
     validate: function(attrs, options) {
         if(attrs.selectedFile && attrs.selectedFile.type !== "application/pdf") {

cms/static/js/views/textbook.js

@@ -243,7 +243,8 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
 
 CMS.Views.UploadDialog = Backbone.View.extend({
     options: {
-        shown: true
+        shown: true,
+        successMessageTimeout: 2000 // 2 seconds
     },
     initialize: function() {
         this.template = _.template($("#upload-dialog-tpl").text());
@@ -263,6 +264,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
             uploading: this.model.get('uploading'),
             uploadedBytes: this.model.get('uploadedBytes'),
             totalBytes: this.model.get('totalBytes'),
+            finished: this.model.get('finished'),
             error: this.model.get('error')
         }));
         // ideally, we'd like to tell the browser to pre-populate the
@@ -326,7 +328,10 @@ CMS.Views.UploadDialog = Backbone.View.extend({
         });
     },
     success: function(response, statusText, xhr, form) {
-        this.model.set('uploading', false);
+        this.model.set({
+            uploading: false,
+            finished: true
+        });
         var chapter = this.options.chapter;
         if(chapter) {
             var options = {};
@@ -336,7 +341,10 @@ CMS.Views.UploadDialog = Backbone.View.extend({
             options.asset_path = response.url;
             chapter.set(options);
         }
-        this.remove();
+        var that = this;
+        this.removalTimeout = setTimeout(function() {
+            that.hide().remove();
+        }, this.options.successMessageTimeout);
     },
     error: function() {
         this.model.set({

cms/templates/js/upload-dialog.underscore

@@ -16,12 +16,15 @@
   <% if(uploading) { %>
     <% if (uploadedBytes && totalBytes) { %>
       <div class="wrapper-progress">
-      <progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
+        <progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
       </div>
     <% } else { %>
       <progress></progress>
     <% } %>
   <% } %>
+  <% if(finished) { %>
+     <strong><%= gettext("Success!") %></strong>
+  <% } %>
   </div>
   <div class="actions">
     <h3 class="sr"><%= gettext('Form Actions') %></h3>