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>

app/models/site_setting.rb

@@ -288,15 +288,15 @@ class SiteSetting < ActiveRecord::Base
   def self.authorized_uploads
     authorized_extensions.tr(" ", "")
                          .split("|")
-                         .map { |extension| (extension.start_with?(".") ? "" : ".") + extension }
+                         .map { |extension| (extension.start_with?(".") ? extension[1..-1] : extension).gsub(".", "\.") }
   end
 
   def self.authorized_upload?(file)
-    authorized_uploads.count > 0 && file.original_filename =~ /(#{authorized_uploads.join("|")})$/i
+    authorized_uploads.count > 0 && file.original_filename =~ /\.(#{authorized_uploads.join("|")})$/i
   end
 
   def self.images
-    @images ||= Set.new [".jpg", ".jpeg", ".png", ".gif", ".tif", ".tiff", ".bmp"]
+    @images ||= Set.new ["jpg", "jpeg", "png", "gif", "tif", "tiff", "bmp"]
   end
 
   def self.authorized_images
@@ -304,7 +304,7 @@ class SiteSetting < ActiveRecord::Base
   end
 
   def self.authorized_image?(file)
-    authorized_images.count > 0 && file.original_filename =~ /(#{authorized_images.join("|")})$/i
+    authorized_images.count > 0 && file.original_filename =~ /\.(#{authorized_images.join("|")})$/i
   end
 
 end

config/locales/client.en.yml

@@ -492,12 +492,12 @@ en:
       add_title_with_attachments: "Add image or file"
       remote_title: "remote image"
       remote_title_with_attachments: "remote image or file"
-      remote_tip: "enter address of an image in the form http://example.com/image.jpg"
-      remote_tip_with_attachments: "enter address of an image or a file in the form http://example.com/file.ext"
+      remote_tip: "enter address of an image in the form http://example.com/image.jpg (allowed extensions: {{authorized_extensions}})."
+      remote_tip_with_attachments: "enter address of an image or a file in the form http://example.com/file.ext (allowed extensions: {{authorized_extensions}})."
       local_title: "local image"
       local_title_with_attachments: "local image or file"
-      local_tip: "click to select an image from your device."
-      local_tip_with_attachments: "click to select an image or a file from your device."
+      local_tip: "click to select an image from your device (allowed extensions: {{authorized_extensions}})."
+      local_tip_with_attachments: "click to select an image or a file from your device (allowed extensions: {{authorized_extensions}})."
       upload_title: "Upload image"
       upload_title_with_attachments: "Upload image or file"
       uploading: "Uploading"

config/locales/client.fr.yml

@@ -497,12 +497,12 @@ fr:
       add_title_with_attachments: "Ajouter le fichier"
       remote_title: "Image distante"
       remote_title_with_attachments: "Fichier distant"
-      remote_tip: "saisissez l'url de l'image (par exemple : http://monsite.com/image.jpg)"
-      remote_tip_with_attachments: "saisissez l'url du fichier (par exemple : http://monsite.com/fichier.txt)"
+      remote_tip: "saisissez l'url de l'image - par exemple : http://monsite.com/image.jpg (extensions autorisées : {{authorized_extensions}})."
+      remote_tip_with_attachments: "saisissez l'url du fichier - par exemple : http://monsite.com/fichier.txt (extensions autorisées : {{authorized_extensions}})."
       local_title: "Image locale"
       local_title_with_attachments: "Fichier local"
-      local_tip: "Cliquez pour sélectionner une image depuis votre ordinateur."
-      local_tip_with_attachments: "Cliquez pour sélectionner un fichier depuis votre ordinateur."
+      local_tip: "Cliquez pour sélectionner une image depuis votre ordinateur (extensions autorisées : {{authorized_extensions}})."
+      local_tip_with_attachments: "Cliquez pour sélectionner un fichier depuis votre ordinateur (extensions autorisées : {{authorized_extensions}})."
       upload_title: "Envoyer l'image"
       upload_title_with_attachments: "Envoyer le fichier"
       uploading: "Fichier en cours d'envoi..."

spec/models/site_setting_spec.rb

@@ -92,9 +92,9 @@ describe SiteSetting do
 
     describe "authorized_uploads" do
 
-      it "trims space and adds leading dots" do
-        SiteSetting.stubs(:authorized_extensions).returns(" png | .jpeg|txt|bmp")
-        SiteSetting.authorized_uploads.should == [".png", ".jpeg", ".txt", ".bmp"]
+      it "trims spaces and leading dots" do
+        SiteSetting.stubs(:authorized_extensions).returns(" png | .jpeg|txt|bmp | .tar.gz")
+        SiteSetting.authorized_uploads.should == ["png", "jpeg", "txt", "bmp", "tar.gz"]
       end
 
     end
@@ -103,7 +103,7 @@ describe SiteSetting do
 
       it "filters non-image out" do
         SiteSetting.stubs(:authorized_extensions).returns(" png | .jpeg|txt|bmp")
-        SiteSetting.authorized_images.should == [".png", ".jpeg", ".bmp"]
+        SiteSetting.authorized_images.should == ["png", "jpeg", "bmp"]
       end
 
     end