Migration `upload-selector` to component

app/assets/javascripts/discourse/controllers/upload-selector.js.es6

@@ -1,30 +1,37 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
-import { default as computed } from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 import { allowsAttachments, authorizesAllExtensions, authorizedExtensions } from 'discourse/lib/utilities';
 
-export function uploadTranslate(key, options) {
+function uploadTranslate(key) {
-  options = options || {};
   if (allowsAttachments()) { key += "_with_attachments"; }
-  return I18n.t(`upload_selector.${key}`, options);
+  return `upload_selector.${key}`;
 }
 
 export default Ember.Controller.extend(ModalFunctionality, {
   showMore: false,
-  local: true,
   imageUrl: null,
   imageLink: null,
-  remote: Ember.computed.not("local"),
+  local: Ember.computed.equal('selection', 'local'),
+  remote: Ember.computed.equal('selection', 'remote'),
+  selection: 'local',
 
-  @computed
+  @computed()
-  uploadIcon() {
+  uploadIcon: () => allowsAttachments() ? "upload" : "picture-o",
-    return allowsAttachments() ? "upload" : "picture-o";
+
+  @computed()
+  title: () => uploadTranslate("title"),
+
+  @computed('selection')
+  tip(selection) {
+    const authorized_extensions = authorizesAllExtensions() ? "" : `(${authorizedExtensions()})`;
+    return I18n.t(uploadTranslate(`${selection}_tip`), { authorized_extensions });
   },
 
-  @computed('local')
+  @observes('selection')
-  tip(local) {
+  _selectionChanged() {
-    const source = local ? "local" : "remote";
+    if (this.get('local')) {
-    const authorized_extensions = authorizesAllExtensions() ? "" : `(${authorizedExtensions()})`;
+      this.set('showMore', false);
-    return uploadTranslate(`${source}_tip`, { authorized_extensions });
+    }
   },
 
   actions: {
@@ -45,12 +52,6 @@ export default Ember.Controller.extend(ModalFunctionality, {
       this.send('closeModal');
     },
 
-    useLocal() {
-      this.setProperties({ local: true, showMore: false});
-    },
-    useRemote() {
-      this.set("local", false);
-    },
     toggleShowMore() {
       this.toggleProperty("showMore");
     }

app/assets/javascripts/discourse/templates/modal/upload-selector.hbs

@@ -1,6 +1,6 @@
-<div class="modal-body">
+{{#d-modal-body title=title class="upload-selector"}}
   <div class="radios">
-    <input type="radio" id="local" value="local" name="upload" {{action "useLocal"}}>
+    {{radio-button name="upload" id="local" value="local" selection=selection}}
     <label class="radio" for="local">{{i18n 'upload_selector.from_my_computer'}}</label>
     {{#if local}}
       <div class="inputs">
@@ -10,7 +10,7 @@
     {{/if}}
   </div>
   <div class="radios">
-    <input type="radio" id="remote" value="remote" name="upload" {{action "useRemote"}}>
+    {{radio-button name="upload" id="remote" value="remote" selection=selection}}
     <label class="radio" for="remote">{{i18n 'upload_selector.from_the_web'}}</label>
     {{#if remote}}
       <div class="inputs">
@@ -38,7 +38,7 @@
       </p>
     </div>
   </div>
-</div>
+{{/d-modal-body}}
 
 <div class="modal-footer">
   {{d-button action="upload" class='btn-primary' icon=uploadIcon label='upload'}}

app/assets/javascripts/discourse/views/upload-selector.js.es6

@@ -1,33 +0,0 @@
-import ModalBodyView from "discourse/views/modal-body";
-import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
-import { uploadTranslate } from 'discourse/controllers/upload-selector';
-
-
-export default ModalBodyView.extend({
-  templateName: 'modal/upload-selector',
-  classNames: ['upload-selector'],
-
-  @computed()
-  title() {
-    return uploadTranslate("title");
-  },
-
-  touchStart(evt) {
-    // HACK: workaround Safari iOS being really weird and not shipping click events
-    if (this.capabilities.isSafari && evt.target.id === "filename-input") {
-      this.$('#filename-input').click();
-    }
-  },
-
-  @on('didInsertElement')
-  @observes('controller.local')
-  selectedChanged() {
-    Ember.run.next(() => {
-      // *HACK* to select the proper radio button
-      const value = this.get('controller.local') ? 'local' : 'remote';
-      $('input:radio[name="upload"]').val([value]);
-      $('.inputs input:first').focus();
-    });
-  }
-
-});