diff --git a/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6 b/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
index 3d771a91e6d..a26d9278732 100644
--- a/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
+++ b/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
@@ -16,16 +16,17 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   @computed('name')
   nameValid(name) {
-    return name && name.match(/^[a-zA-Z0-9-_]+$/);
+    return name && name.match(/\A[a-z_][a-z0-9_-]*\z/i);
   },
 
   @observes('name')
-  uploadChanged(){
-    let file = $('#file-input')[0];
+  uploadChanged() {
+    const file = $('#file-input')[0];
     this.set('fileSelected', file && file.files[0]);
   },
 
   actions: {
+
     updateName() {
       let name = this.get('name');
       if (Em.isEmpty(name)) {
@@ -34,20 +35,21 @@ export default Ember.Controller.extend(ModalFunctionality, {
       }
       this.uploadChanged();
     },
-    upload() {
 
-      let options = {
-        type: 'POST'
+    upload() {
+      const file = $('#file-input')[0].files[0];
+
+      const options = {
+        type: 'POST',
+        processData: false,
+        contentType: false,
+        data: new FormData()
       };
 
-      options.processData = false;
-      options.contentType = false;
-      options.data = new FormData();
-      let file = $('#file-input')[0].files[0];
       options.data.append('file', file);
 
-      ajax('/admin/themes/upload_asset', options).then(result=>{
-        let upload = {
+      ajax('/admin/themes/upload_asset', options).then(result => {
+        const upload = {
           upload_id: result.upload_id,
           name: this.get('name'),
           original_filename: file.name
@@ -57,7 +59,6 @@ export default Ember.Controller.extend(ModalFunctionality, {
       }).catch(e => {
         popupAjaxError(e);
       });
-
     }
   }
 });
diff --git a/app/models/theme_field.rb b/app/models/theme_field.rb
index 761a2eefd93..386b0fb903a 100644
--- a/app/models/theme_field.rb
+++ b/app/models/theme_field.rb
@@ -14,6 +14,9 @@ class ThemeField < ActiveRecord::Base
     @theme_var_type_ids ||= [2, 3, 4]
   end
 
+  validates :name, format: { with: /\A[a-z_][a-z0-9_-]*\z/i },
+                   if: Proc.new { |field| ThemeField.theme_var_type_ids.include?(field.type_id) }
+
   COMPILER_VERSION = 5
 
   belongs_to :theme
@@ -124,7 +127,6 @@ COMPILED
       if will_save_change_to_error?
         update_columns(error: self.error)
       end
-
     end
   end
 
diff --git a/spec/models/theme_field_spec.rb b/spec/models/theme_field_spec.rb
index 9952dfc2dd0..798cb478197 100644
--- a/spec/models/theme_field_spec.rb
+++ b/spec/models/theme_field_spec.rb
@@ -29,4 +29,19 @@ HTML
     expect(field.error).to eq(nil)
   end
 
+  def create_upload_theme_field!(name)
+    ThemeField.create!(
+      theme_id: 1,
+      target_id: 0,
+      value: "",
+      type_id: ThemeField.types[:theme_upload_var],
+      name: name,
+    )
+  end
+
+  it "ensures we don't use invalid SCSS variable names" do
+    expect { create_upload_theme_field!("42") }.to raise_error(ActiveRecord::RecordInvalid)
+    expect { create_upload_theme_field!("a42") }.not_to raise_error
+  end
+
 end