add educational hint in the upload selector dialog

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

@@ -19,6 +19,11 @@
       </div>
     {{/if}}
   </div>
+  <div class="radios">
+    <div class="inputs">
+      <p class="hint">{{unbound view.hint}}</p>
+    </div>
+  </div>
 </div>
 
 <div class="modal-footer">

app/assets/javascripts/discourse/views/modal/upload_selector_view.js

@@ -19,6 +19,16 @@ Discourse.UploadSelectorView = Discourse.ModalBodyView.extend({
     return Discourse.UploadSelectorController.translate(source + "_tip", opts);
   }.property("controller.local"),
 
+  hint: function() {
+    // chrome is the only browser that support copy & paste of images.
+    return I18n.t("upload_selector.hint" + (this.get("isChrome") ? "_for_chrome" : ""));
+  }.property(),
+
+  isChrome: function() {
+    // cf. http://stackoverflow.com/a/9851769/11983
+    return !!window.chrome && !(!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0);
+  }.property(),
+
   didInsertElement: function() {
     this._super();
     this.selectedChanged();

app/assets/stylesheets/desktop/upload.scss

@@ -30,9 +30,13 @@
         font-size: 14px;
         line-height: 18px;
       }
-      .description {
+      .description, .hint {
         color: #9a9ea0;
       }
+      .hint {
+        font-style: italic;
+        margin: 5px 0 0 0;
+      }
     }
   }
 }

config/locales/client.en.yml

@@ -526,6 +526,8 @@ en:
       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_tip: "click to select an image from your device"
       local_tip_with_attachments: "click to select an image or a file from your device (allowed extensions: {{authorized_extensions}})"
+      hint: "(you can also drag & drop into the editor to upload them)"
+      hint_for_chrome: "(you can also drag and drop or paste images into the editor to upload them)"
       uploading: "Uploading"
 
     search: