Update copy to include PNGs, add tests, remove default MIME type.

cms/static/coffee/spec/models/upload_spec.coffee

@@ -11,11 +11,6 @@ describe "CMS.Models.FileUpload", ->
     it "is valid by default", ->
         expect(@model.isValid()).toBeTruthy()
 
-    it "is valid for PDF files by default", ->
-        file = {"type": "application/pdf"}
-        @model.set("selectedFile", file);
-        expect(@model.isValid()).toBeTruthy()
-
     it "is invalid for text files by default", ->
         file = {"type": "text/plain"}
         @model.set("selectedFile", file);
@@ -26,8 +21,36 @@ describe "CMS.Models.FileUpload", ->
         @model.set("selectedFile", file);
         expect(@model.isValid()).toBeFalsy()
 
-    it "can accept non-PDF files when explicitly set", ->
+    it "can accept a file type when explicitly set", ->
         file = {"type": "image/png"}
         @model.set("mimeTypes": ["image/png"])
         @model.set("selectedFile", file)
         expect(@model.isValid()).toBeTruthy()
+
+    it "can accept multiple file types", ->
+        file = {"type": "image/gif"}
+        @model.set("mimeTypes": ["image/png", "image/jpeg", "image/gif"])
+        @model.set("selectedFile", file)
+        expect(@model.isValid()).toBeTruthy()
+
+    describe "fileTypes", ->
+      it "returns a list of the uploader's file types", ->
+        @model.set('mimeTypes', ['image/png', 'application/json'])
+        expect(@model.fileTypes()).toEqual(['PNG', 'JSON'])
+
+    describe "formatValidTypes", ->
+      it "returns a map of formatted file types and extensions", ->
+        @model.set('mimeTypes', ['image/png', 'image/jpeg', 'application/json'])
+        formatted = @model.formatValidTypes()
+        expect(formatted).toEqual(
+          fileTypes: 'PNG, JPEG or JSON',
+          fileExtensions: '.png, .jpeg or .json'
+        )
+
+      it "does not format with only one mime type", ->
+        @model.set('mimeTypes', ['application/pdf'])
+        formatted = @model.formatValidTypes()
+        expect(formatted).toEqual(
+          fileTypes: 'PDF',
+          fileExtensions: '.pdf'
+        )

cms/static/coffee/spec/views/upload_spec.coffee

@@ -8,10 +8,12 @@ describe "CMS.Views.UploadDialog", ->
         appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(feedbackTpl))
         CMS.URL.UPLOAD_ASSET = "/upload"
 
-        @model = new CMS.Models.FileUpload()
+        @model = new CMS.Models.FileUpload(
+          mimeTypes: ['application/pdf']
+        )
         @chapter = new CMS.Models.Chapter()
         @view = new CMS.Views.UploadDialog(
-          model: @model
+          model: @model,
           onSuccess: (response) =>
             options = {}
             if !@chapter.get('name')

cms/static/js/models/uploads.js

@@ -7,7 +7,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({
         "uploadedBytes": 0,
         "totalBytes": 0,
         "finished": false,
-        "mimeTypes": ["application/pdf"]
+        "mimeTypes": []
     },
     validate: function(attrs, options) {
         if(attrs.selectedFile && !_.contains(this.attributes.mimeTypes, attrs.selectedFile.type)) {
@@ -35,7 +35,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({
         if(this.attributes.mimeTypes.length === 1) {
             return {
                 fileTypes: this.fileTypes()[0],
-                fileExtensions: this.fileTypes()[0].toLowerCase()
+                fileExtensions: '.' + this.fileTypes()[0].toLowerCase()
             };
         }
         var or = gettext('or');

cms/static/js/views/settings/main_settings_view.js

@@ -238,7 +238,7 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
         event.preventDefault();
         var upload = new CMS.Models.FileUpload({
             title: gettext("Upload your course image."),
-            message: gettext("Files must be in JPG format."),
+            message: gettext("Files must be in JPEG or PNG format."),
             mimeTypes: ['image/jpeg', 'image/png']
         });
         var self = this;

cms/static/js/views/textbook.js

@@ -243,7 +243,8 @@ CMS.Views.EditChapter = Backbone.View.extend({
         var msg = new CMS.Models.FileUpload({
             title: _.template(gettext("Upload a new PDF to “<%= name %>”"),
                 {name: section.escape('name')}),
-            message: "Files must be in PDF format."
+            message: "Files must be in PDF format.",
+            mimeTypes: ['application/pdf']
         });
         var that = this;
         var view = new CMS.Views.UploadDialog({

cms/templates/settings.html

@@ -229,14 +229,14 @@ from contentstore import utils
                     <span class="wrapper-course-image">
                       <img class="course-image placeholder" id="course-image" src="${utils.course_image_url(context_course)}" alt="${_('Course Image')}"/>
                     </span>
-                    <span class="msg msg-empty">${_("Your course currently does not have an image. Please upload one (.jpg format and mimimum suggested dimensions are 375px wide by 200px tall)")}</span>
+                    <span class="msg msg-empty">${_("Your course currently does not have an image. Please upload one (JPEG or PNG format, and minimum suggested dimensions are 375px wide by 200px tall)")}</span>
                     % endif
                   </div>
 
                   <div class="wrapper-input">
                     <div class="input">
                       <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
-                      <span class="tip tip-stacked">${_("please provide a valid path and name to your course image (Note: only .jpg format supported)")}</span>
+                      <span class="tip tip-stacked">${_("Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)")}</span>
                     </div>
                     <button type="button" class="action action-upload-image">${_("Upload Course Image")}</button>
                   </div>