Add support for PNGs as course images.

Also change the file uploader to accept multiple file types.

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

@@ -28,6 +28,6 @@ describe "CMS.Models.FileUpload", ->
 
     it "can accept non-PDF files when explicitly set", ->
         file = {"type": "image/png"}
-        @model.set("mimeType": "image/png")
+        @model.set("mimeTypes": ["image/png"])
         @model.set("selectedFile", file)
         expect(@model.isValid()).toBeTruthy()

cms/static/js/models/uploads.js

@@ -7,22 +7,53 @@ CMS.Models.FileUpload = Backbone.Model.extend({
         "uploadedBytes": 0,
         "totalBytes": 0,
         "finished": false,
-        "mimeType": "application/pdf",
-        "fileType": "PDF"
+        "mimeTypes": ["application/pdf"]
     },
-    // NOTE: validation functions should return non-internationalized error
-    // messages. The messages will be passed through gettext in the template.
     validate: function(attrs, options) {
-        if(attrs.selectedFile && attrs.selectedFile.type !== this.attributes.mimeType) {
+        if(attrs.selectedFile && !_.contains(this.attributes.mimeTypes, attrs.selectedFile.type)) {
             return {
                 message: _.template(
-                    gettext("Only {fileType} files can be uploaded. Please select a file ending in .{fileExtension} to upload."),
-                    {
-                        fileType: this.attributes.fileType,
-                        fileExtension: this.attributes.fileType.toLowerCase()
-                    }),
+                    gettext("Only <%= fileTypes %> files can be uploaded. Please select a file ending in <%= fileExtensions %> to upload."),
+                    this.formatValidTypes()
+                ),
                 attributes: {selectedFile: true}
             };
         }
+    },
+    // Return a list of this uploader's valid file types
+    fileTypes: function() {
+        return _.map(
+            this.attributes.mimeTypes,
+            function(type) {
+                return type.split('/')[1].toUpperCase();
+            }
+        );
+    },
+    // Return strings for the valid file types and extensions this
+    // uploader accepts, formatted as natural language
+    formatValidTypes: function() {
+        if(this.attributes.mimeTypes.length === 1) {
+            return {
+                fileTypes: this.fileTypes()[0],
+                fileExtensions: this.fileTypes()[0].toLowerCase()
+            };
+        }
+        var or = gettext('or');
+        var formatTypes = function(types) {
+            return _.template('<%= initial %> <%= or %> <%= last %>', {
+                initial: _.initial(types).join(', '),
+                or: or,
+                last: _.last(types)
+            });
+        };
+        return {
+            fileTypes: formatTypes(this.fileTypes()),
+            fileExtensions: formatTypes(
+                _.map(this.fileTypes(),
+                      function(type) {
+                          return '.' + type.toLowerCase();
+                      })
+            )
+        };
     }
 });

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

@@ -239,8 +239,7 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
         var upload = new CMS.Models.FileUpload({
             title: gettext("Upload your course image."),
             message: gettext("Files must be in JPG format."),
-            mimeType: "image/jpeg",
-            fileType: "JPG"
+            mimeTypes: ['image/jpeg', 'image/png']
         });
         var self = this;
         var modal = new CMS.Views.UploadDialog({