enhance upload selector

- Change the icon on the button to a file when attachments are enabled
- Display the list of allowed extensions in the upload selector
- FIX : regexps for validating uploads weren't escaping the dots

app/assets/javascripts/discourse/components/utilities.js

@@ -7,6 +7,9 @@
 **/
 Discourse.Utilities = {
 
+  IMAGE_EXTENSIONS: [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".tif", ".tiff"],
+  IS_AN_IMAGE_REGEXP: /\.(png|jpg|jpeg|gif|bmp|tif|tiff)$/i,
+
   translateSize: function(size) {
     switch (size) {
       case 'tiny': return 20;
@@ -193,7 +196,7 @@ Discourse.Utilities = {
   validateUploadedFile: function(file, type) {
     // check that the uploaded file is authorized
     if (!Discourse.Utilities.isAuthorizedUpload(file)) {
-      var extensions = Discourse.SiteSettings.authorized_extensions.replace(/\|/g, ", ");
+      var extensions = Discourse.Utilities.authorizedExtensions();
       bootbox.alert(I18n.t('post.errors.upload_not_authorized', { authorized_extensions: extensions }));
       return false;
     }
@@ -249,7 +252,7 @@ Discourse.Utilities = {
     @param {String} path The path
   **/
   isAnImage: function(path) {
-    return path && path.match(/\.(png|jpg|jpeg|gif|bmp|tif|tiff)$/i);
+    return Discourse.Utilities.IS_AN_IMAGE_REGEXP.test(path);
   },
 
   /**
@@ -258,7 +261,11 @@ Discourse.Utilities = {
     @method allowsAttachments
   **/
   allowsAttachments: function() {
-    return _.difference(Discourse.SiteSettings.authorized_extensions.split("|"), [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".tif", ".tiff"]).length > 0;
+    return _.difference(Discourse.SiteSettings.authorized_extensions.split("|"), Discourse.Utilities.IMAGE_EXTENSIONS).length > 0;
+  },
+
+  authorizedExtensions: function() {
+    return Discourse.SiteSettings.authorized_extensions.replace(/\|/g, ", ");
   }
 
 };

app/assets/javascripts/discourse/controllers/upload_selector_controller.js

@@ -14,18 +14,29 @@ Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.Modal
   selectLocal: function() { this.set('localSelected', true); },
   selectRemote: function() { this.set('localSelected', false); },
 
-  localTitle: function() { return Discourse.UploadSelectorController.translate("local_title") }.property(),
-  remoteTitle: function() { return Discourse.UploadSelectorController.translate("remote_title") }.property(),
-  localTip: function() { return Discourse.UploadSelectorController.translate("local_tip") }.property(),
-  remoteTip: function() { return Discourse.UploadSelectorController.translate("remote_tip") }.property(),
-  uploadTitle: function() { return Discourse.UploadSelectorController.translate("upload_title") }.property(),
-  addTitle: function() { return Discourse.UploadSelectorController.translate("add_title") }.property()
+  localTitle: function() { return Discourse.UploadSelectorController.translate("local_title"); }.property(),
+  remoteTitle: function() { return Discourse.UploadSelectorController.translate("remote_title"); }.property(),
+  uploadTitle: function() { return Discourse.UploadSelectorController.translate("upload_title"); }.property(),
+  addTitle: function() { return Discourse.UploadSelectorController.translate("add_title"); }.property(),
+
+  localTip: function() {
+    var opts = { authorized_extensions: Discourse.Utilities.authorizedExtensions() };
+    return Discourse.UploadSelectorController.translate("local_tip", opts);
+  }.property(),
+
+  remoteTip: function() {
+    var opts = { authorized_extensions: Discourse.Utilities.authorizedExtensions() };
+    return Discourse.UploadSelectorController.translate("remote_tip", opts);
+  }.property(),
+
+  addUploadIcon: function() { return Discourse.Utilities.allowsAttachments() ? "icon-file-alt" : "icon-picture"; }.property()
 
 });
 
 Discourse.UploadSelectorController.reopenClass({
-  translate: function(key) {
-    if (Discourse.Utilities.allowsAttachments()) key += "_with_attachments";
-    return I18n.t("upload_selector." + key);
+  translate: function(key, options) {
+    opts = options || {};
+    if (Discourse.Utilities.allowsAttachments()) { key += "_with_attachments"; }
+    return I18n.t("upload_selector." + key, opts);
   }
 });

app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars

@@ -16,7 +16,7 @@
   </div>
   <div class='modal-footer'>
     <button class='btn btn-large btn-primary' {{action upload target="view"}}>
-      <span class='add-upload'><i class='icon-file-alt'></i><i class='icon-plus'></i></span>
+      <span class='add-upload'><i {{bindAttr class="addUploadIcon"}}></i><i class='icon-plus'></i></span>
       {{uploadTitle}}
     </button>
   </div>
@@ -29,7 +29,7 @@
   </div>
   <div class='modal-footer'>
     <button class='btn btn-large btn-primary' {{action add target="view"}}>
-      <span class='add-upload'><i class='icon-file-alt'></i><i class='icon-plus'></i></span>
+      <span class='add-upload'><i {{bindAttr class="addUploadIcon"}}></i><i class='icon-plus'></i></span>
       {{addTitle}}
     </button>
   </div>