improve upload functionality

app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6

@@ -168,7 +168,14 @@ export default Ember.Controller.extend({
     },
 
     removeUpload(upload) {
+      return bootbox.confirm(
+          I18n.t("admin.customize.theme.delete_upload_confirm"),
+          I18n.t("no_value"),
+          I18n.t("yes_value"), result => {
+            if (result) {
               this.get("model").removeField(upload);
+            }
+      });
     },
 
     removeChildTheme(theme) {

app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6

@@ -1,11 +1,30 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import { ajax } from 'discourse/lib/ajax';
-// import computed from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 export default Ember.Controller.extend(ModalFunctionality, {
   adminCustomizeThemesShow: Ember.inject.controller(),
 
+  onShow() {
+    this.set('name', null);
+    this.set('fileSelected', false);
+  },
+
+  enabled: Em.computed.and('nameValid', 'fileSelected'),
+  disabled: Em.computed.not('enabled'),
+
+  @computed('name')
+  nameValid(name) {
+    return name && name.match(/^[a-zA-Z0-9-_]+$/)
+  },
+
+  @observes('name')
+  uploadChanged(){
+    let file = $('#file-input')[0];
+    this.set('fileSelected', file && file.files[0]);
+  },
+
   actions: {
     updateName() {
       let name = this.get('name');
@@ -13,6 +32,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
         name = $('#file-input')[0].files[0].name;
         this.set('name', name.split(".")[0]);
       }
+      this.uploadChanged();
     },
     upload() {
 

app/assets/javascripts/admin/templates/customize-themes-show.hbs

@@ -91,7 +91,12 @@
   {{#if model.uploads}}
     <ul class='removable-list'>
       {{#each model.uploads as |upload|}}
-      <li><span class='first'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span>{{d-button action="removeUpload" actionParam=upload class="second btn-small cancel-edit" icon="times"}}</li>
+      <li>
+        <span class='col'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span>
+        <span class='col'>
+          {{d-button action="removeUpload" actionParam=upload class="second btn-small cancel-edit" icon="times"}}
+        </span>
+      </li>
       {{/each}}
     </ul>
   {{else}}
@@ -113,7 +118,7 @@
     {{else}}
     <ul class='removable-list'>
       {{#each model.childThemes as |child|}}
-      <li>{{#link-to 'adminCustomizeThemes.show' child replace=true class='first'}}{{child.name}}{{/link-to}} {{d-button action="removeChildTheme" actionParam=child class="btn-small cancel-edit second" icon="times"}}</li>
+      <li>{{#link-to 'adminCustomizeThemes.show' child replace=true class='col'}}{{child.name}}{{/link-to}} {{d-button action="removeChildTheme" actionParam=child class="btn-small cancel-edit col" icon="times"}}</li>
       {{/each}}
     </ul>
     {{/unless}}

app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs

@@ -1,12 +1,14 @@
-{{#d-modal-body class='upload-selector' title="admin.customize.theme.add_upload"}}
+{{#d-modal-body class='add-upload-modal' title="admin.customize.theme.add_upload"}}
     <div class="inputs">
-      <input id="name" placeholder={{i18n 'admin.customize.theme.upload_name'}} value={{name}}><br>
       <input onchange={{action "updateName"}} type="file" id="file-input" accept='*'><br>
-      <span class="description">{{i18n 'admin.customize.theme.upload_file_tip'}}</span>
+      <span class="description">{{i18n 'admin.customize.theme.upload_file_tip'}}</span><br>
+      <label>{{i18n 'admin.customize.theme.variable_name'}}
+        {{input id="name" value=name}}<br>
+      </label>
     </div>
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  {{d-button action="upload" disabled=loading class='btn btn-primary' icon='upload' label='admin.customize.theme.upload'}}
+  {{d-button action="upload" disabled=disabled class='btn btn-primary' icon='upload' label='admin.customize.theme.upload'}}
   <a href {{action "closeModal"}}>{{i18n 'cancel'}}</a>
 </div>

app/assets/stylesheets/common/admin/customize.scss

@@ -193,15 +193,21 @@
     margin-left: 0;
     li {
       display: table-row;
-      .first {
+      .col:first-child {
-        padding-right: 8px;
+        padding-right: 10px;
         padding-bottom: 10px;
-        min-width: 100px;
+        min-width: 80px;
       }
-      .first, .second {
+      .col {
         display: table-cell;
       }
     }
   }
 }
 
+.add-upload-modal {
+  label {
+    margin-top: 20px;
+  }
+}
+

app/controllers/admin/themes_controller.rb

@@ -13,7 +13,7 @@ class Admin::ThemesController < Admin::AdminController
     File.open(path) do |file|
       upload = Upload.create_for(current_user.id,
                                  file,
-                                 params[:original_filename] || File.basename(path),
+                                 params[:file]&.original_filename || File.basename(path),
                                  File.size(path),
                                  for_theme: true)
       if upload.errors.count > 0

config/locales/client.en.yml

@@ -2845,12 +2845,13 @@ en:
           no_uploads: "You can upload assets associated with your theme such as fonts and images"
           add_upload: "Add Upload"
           upload_file_tip: "Choose an asset to upload (png, woff2, etc...)"
+          variable_name: "SCSS var name:"
           upload: "Upload"
           child_themes_check: "Theme includes other child themes"
           css_html: "Custom CSS/HTML"
           edit_css_html: "Edit CSS/HTML"
           edit_css_html_help: "You have not edited any CSS or HTML"
-          upload_name: "Name"
+          delete_upload_confirm: "Delete this upload? (Theme CSS may stop working!)"
           import_web_tip: "Repository containing theme"
           import_file_tip: ".dcstyle.json file containing theme"
           about_theme: "About Theme"

spec/controllers/admin/themes_controller_spec.rb

@@ -22,9 +22,9 @@ describe Admin::ThemesController do
       end
 
       it 'can create a theme upload' do
-        xhr :post, :upload_asset, file: upload, original_filename: 'wooof.woff2'
+        xhr :post, :upload_asset, file: upload
         expect(response.status).to eq(201)
-        upload = Upload.find_by(original_filename: "wooof.woff2")
+        upload = Upload.find_by(original_filename: "test.woff2")
         expect(upload.id).not_to be_nil
         expect(JSON.parse(response.body)["upload_id"]).to eq(upload.id)
       end

spec/models/theme_field_spec.rb

@@ -27,4 +27,5 @@ HTML
 
     expect(field.error).to eq(nil)
   end
+
 end