diff --git a/src/Upload/index.js b/src/Upload/index.js
deleted file mode 100644
index 85b1c757a..000000000
--- a/src/Upload/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Upload from './src/Upload.vue'
-import UploadDragger from './src/UploadDragger.vue'
-
-Upload.install = function (app, naive) {
-  app.component(Upload.name + naive.componentPrefix, Upload)
-  app.component(UploadDragger.name + naive.componentPrefix, UploadDragger)
-}
-
-export default Upload
diff --git a/src/_styles/Upload.scss b/src/_styles/Upload.scss
index 92c310d0c..66cf44148 100644
--- a/src/_styles/Upload.scss
+++ b/src/_styles/Upload.scss
@@ -1,173 +1,181 @@
-@import 'mixins/mixins.scss';
+// @import 'mixins/mixins.scss';
 
-@include themes-mixin {
-  @include b(upload) {
-    @include once {
-      @include e(file-input) {
-        display: block;
-        width: 0;
-        height: 0;
-        opacity: 0;
-      }
-      @include e(activator) {
-        display: inline-block;
-      }
-      @include m(dragger-inside) {
-        @include e(activator) {
-          display: block;
-        }
-      }
-    }
-    @include b(upload-dragger) {
-      @include once {
-        cursor: pointer;
-        box-sizing: border-box;
-        width: 100%;
-        text-align: center;
-        border-radius: $--n-upload-border-radius;
-        padding: 24px;
-        transition:
-          border-color .3s $--n-ease-in-out-cubic-bezier,
-          background-color .3s $--n-ease-in-out-cubic-bezier;
-      }
-      background-color: map-get($--upload-dragger-background-color, 'default');
-      border: 1px dashed map-get($--upload-dragger-border-color, 'default');
-      &:hover {
-        border-color: map-get($--upload-dragger-border-color, 'hover');
-      }
-    }
-    @include b(upload-file-list) {
-      @include once {
-        margin-top: 8px;
-        line-height: 1.75;
-      }
-      @include b(upload-file) {
-        @include once {
-          @include fade-in-height-expand-transition;
-          display: block;
-          box-sizing: border-box;
-          cursor: default;
-          padding: 0px 12px 0 6px;
-          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-          border-radius: $--n-upload-border-radius;
-          @include b(progress) {
-            @include fade-in-height-expand-transition($fold-padding: true);
-            box-sizing: border-box;
-            padding-bottom: 6px;
-            margin-bottom: 6px;
-          }
-        }
-        &:hover {
-          background-color: map-get($--upload-file-item-background-color, 'hover');
-          @include once {
-            @include b(upload-file-info) {
-              @include e(action) {
-                opacity: 1;
-              }
-            }
-          }
-        }
-        @include m(error-status) {
-          &:hover {
-            background-color: map-get($--upload-file-item-background-color, 'error-hover');
-          }
-          @include b(upload-file-info) {
-            @include e(name) {
-              color: map-get($--upload-info-text-color, 'error');
-            }
-          }
-        }
-        @include m(success-status) {
-          @include b(upload-file-info) {
-            @include e(name) {
-              color: map-get($--upload-info-text-color, 'success');
-            }
-          }
-        }
-        @include m(with-url) {
-          @include once {
-            cursor: pointer;
-          }
-          @include b(upload-file-info) {
-            @include e(name) {
-              @include once {
-                text-decoration: underline;
-              }
-              color: map-get($--upload-info-text-color, 'success');
-              text-decoration-color: map-get($--upload-info-text-color, 'success');
-            }
-          }
-        }
-        @include b(upload-file-info) {
-          @include once {
-            position: relative;
-            padding-top: 6px;
-            padding-bottom: 6px;
-            @include e(action) {
-              padding-top: inherit;
-              padding-bottom: inherit;
-              position: absolute;
-              right: 0;
-              top: 0;
-              bottom: 0;
-              width: 80px;
-              display: flex;
-              align-items: center;
-              transition: opacity .2s $--n-ease-in-out-cubic-bezier;
-              flex-direction: row-reverse;
-              opacity: 0;
-              @include b(button) {
-                &:not(:first-child) {
-                  margin-right: 8px;
-                }
-                @include b(icon) {
-                  svg {
-                    @include icon-switch-transition;
-                  }
-                }
-              }
-            }
-          }
-          @include e(name) {
-            @include once {
-              text-overflow: ellipsis;
-              overflow: hidden;
-              text-decoration: underline;
-              text-decoration-color: transparent;
-              font-size: 14px;
-              transition:
-                color .3s $--n-ease-in-out-cubic-bezier,
-                text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
-            }
-            @include b(icon) {
-              @include once {
-                font-size: 18px;
-                margin-right: 2px;
-                vertical-align: middle;
-              }
-              fill: map-get($--upload-info-icon-color, 'default');
-              stroke: map-get($--upload-info-icon-color, 'default');
-            }
-            color: map-get($--upload-info-text-color, 'default');
-          }
-        }
-      }
-    }
-    @include m(disabled) {
-      opacity: $--upload-disabled-opacity;
-      @include once {
-        @include e(activator) {
-          cursor: not-allowed;
-        }
-        @include b(upload-file-list)  {
-          cursor: not-allowed;
-        }
-      }
-    }
-    @include m(drag-over) {
-      @include b(upload-dragger) {
-        border-color: map-get($--upload-dragger-border-color, 'hover');
-      }
-    }
-  }
-}
\ No newline at end of file
+// @include themes-mixin {
+//   @include b(upload) {
+//     @include once {
+//       @include e(file-input) {
+//         display: block;
+//         width: 0;
+//         height: 0;
+//         opacity: 0;
+//       }
+//       @include e(activator) {
+//         display: inline-block;
+//       }
+//       @include m(dragger-inside) {
+//         @include e(activator) {
+//           display: block;
+//         }
+//       }
+//     }
+//     @include b(upload-dragger) {
+//       @include once {
+//         cursor: pointer;
+//         box-sizing: border-box;
+//         width: 100%;
+//         text-align: center;
+//         border-radius: $--n-upload-border-radius;
+//         padding: 24px;
+//         transition:
+//           border-color .3s $--n-ease-in-out-cubic-bezier,
+//           background-color .3s $--n-ease-in-out-cubic-bezier;
+//       }
+//       // ?
+//       background-color: map-get($--upload-dragger-background-color, 'default');
+//       border: 1px dashed map-get($--upload-dragger-border-color, 'default');
+//       &:hover {
+//         border-color: map-get($--upload-dragger-border-color, 'hover');
+//       }
+//       // ?
+//     }
+//     @include b(upload-file-list) {
+//       @include once {
+//         margin-top: 8px;
+//         line-height: 1.75;
+//       }
+//       @include b(upload-file) {
+//         @include once {
+//           // ?
+//           @include fade-in-height-expand-transition;
+//           display: block;
+//           box-sizing: border-box;
+//           cursor: default;
+//           padding: 0px 12px 0 6px;
+//           transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//           border-radius: $--n-upload-border-radius;
+//           @include b(progress) {
+//             // ?
+//             @include fade-in-height-expand-transition($fold-padding: true);
+//             box-sizing: border-box;
+//             padding-bottom: 6px;
+//             margin-bottom: 6px;
+//           }
+//         }
+//         &:hover {
+//           // ?
+//           background-color: map-get($--upload-file-item-background-color, 'hover');
+//           @include once {
+//             @include b(upload-file-info) {
+//               @include e(action) {
+//                 opacity: 1;
+//               }
+//             }
+//           }
+//         }
+//         // ?
+//         @include m(error-status) {
+//           &:hover {
+//             background-color: map-get($--upload-file-item-background-color, 'error-hover');
+//           }
+//           @include b(upload-file-info) {
+//             @include e(name) {
+//               color: map-get($--upload-info-text-color, 'error');
+//             }
+//           }
+//         }
+//         @include m(success-status) {
+//           @include b(upload-file-info) {
+//             @include e(name) {
+//               color: map-get($--upload-info-text-color, 'success');
+//             }
+//           }
+//         }
+//         // ?
+//         @include m(with-url) {
+//           @include once {
+//             cursor: pointer;
+//           }
+//           @include b(upload-file-info) {
+//             @include e(name) {
+//               @include once {
+//                 text-decoration: underline;
+//               }
+//               color: map-get($--upload-info-text-color, 'success');
+//               text-decoration-color: map-get($--upload-info-text-color, 'success');
+//             }
+//           }
+//         }
+//         @include b(upload-file-info) {
+//           @include once {
+//             position: relative;
+//             padding-top: 6px;
+//             padding-bottom: 6px;
+//             @include e(action) {
+//               padding-top: inherit;
+//               padding-bottom: inherit;
+//               position: absolute;
+//               right: 0;
+//               top: 0;
+//               bottom: 0;
+//               width: 80px;
+//               display: flex;
+//               align-items: center;
+//               transition: opacity .2s $--n-ease-in-out-cubic-bezier;
+//               flex-direction: row-reverse;
+//               opacity: 0;
+//               @include b(button) {
+//                 // ?
+//                 &:not(:first-child) {
+//                   margin-right: 8px;
+//                 }
+//                 @include b(icon) {
+//                   svg {
+//                     @include icon-switch-transition;
+//                   }
+//                 }
+//               }
+//             }
+//           }
+//           @include e(name) {
+//             @include once {
+//               text-overflow: ellipsis;
+//               overflow: hidden;
+//               text-decoration: underline;
+//               text-decoration-color: transparent;
+//               font-size: 14px;
+//               transition:
+//                 color .3s $--n-ease-in-out-cubic-bezier,
+//                 text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
+//             }
+//             @include b(icon) {
+//               @include once {
+//                 font-size: 18px;
+//                 margin-right: 2px;
+//                 vertical-align: middle;
+//               }
+//               fill: map-get($--upload-info-icon-color, 'default');
+//               stroke: map-get($--upload-info-icon-color, 'default');
+//             }
+//             color: map-get($--upload-info-text-color, 'default');
+//           }
+//         }
+//       }
+//     }
+//     @include m(disabled) {
+//       opacity: $--upload-disabled-opacity;
+//       @include once {
+//         @include e(activator) {
+//           cursor: not-allowed;
+//         }
+//         @include b(upload-file-list)  {
+//           cursor: not-allowed;
+//         }
+//       }
+//     }
+//     @include m(drag-over) {
+//       @include b(upload-dragger) {
+//         border-color: map-get($--upload-dragger-border-color, 'hover');
+//       }
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 726a5f9e1..898ed5c95 100644
--- a/src/index.js
+++ b/src/index.js
@@ -67,7 +67,7 @@ import Tooltip from './tooltip'
 import Transfer from './transfer'
 import Tree from './tree'
 import Typography from './typography'
-import Upload from './Upload'
+import Upload from './upload'
 import zhCN from './locale/zhCN'
 import enUS from './locale/enUS'
 
@@ -192,6 +192,8 @@ import tableLightStyle from './table/styles/light'
 import tableDarkStyle from './table/styles/dark'
 import popoverLightStyle from './popover/styles/light'
 import popoverDarkStyle from './popover/styles/dark'
+import uploadLightStyle from './upload/styles/light'
+import uploadDarkStyle from './upload/styles/dark'
 import descriptionsLightStyle from './descriptions/styles/light'
 import descriptionsDarkStyle from './descriptions/styles/dark'
 
@@ -415,6 +417,8 @@ export default create({
     tableDarkStyle,
     popoverLightStyle,
     popoverDarkStyle,
+    uploadLightStyle,
+    uploadDarkStyle,
     descriptionsLightStyle,
     descriptionsDarkStyle,
     // Can be remove after refactoring
diff --git a/src/upload/index.js b/src/upload/index.js
new file mode 100644
index 000000000..2edd8caa7
--- /dev/null
+++ b/src/upload/index.js
@@ -0,0 +1,9 @@
+import Upload from './src/Upload.vue'
+import UploadDragger from './src/UploadDragger.vue'
+
+Upload.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Upload.name, Upload)
+  Vue.component(naive.componentPrefix + UploadDragger.name, UploadDragger)
+}
+
+export default Upload
diff --git a/src/Upload/src/Upload.vue b/src/upload/src/Upload.vue
similarity index 98%
rename from src/Upload/src/Upload.vue
rename to src/upload/src/Upload.vue
index aa333b777..b607a4dd8 100644
--- a/src/Upload/src/Upload.vue
+++ b/src/upload/src/Upload.vue
@@ -41,6 +41,8 @@
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import NUploadFile from './UploadFile'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 function createId () {
   return Math.random()
@@ -167,7 +169,7 @@ export default {
       NUpload: this
     }
   },
-  mixins: [ withapp, themeable ],
+  mixins: [ withapp, themeable, usecssr(styles) ],
   props: {
     name: {
       type: String,
@@ -302,8 +304,8 @@ export default {
       this.dragOver = false
     },
     handleActivatorDrop (e) {
-      if (!this.draggerInside || this.disabled) return
       e.preventDefault()
+      if (!this.draggerInside || this.disabled) return
       const dataTransfer = e.dataTransfer
       const files = dataTransfer.files || []
       this.handleFileAddition(files)
diff --git a/src/Upload/src/UploadDragger.vue b/src/upload/src/UploadDragger.vue
similarity index 100%
rename from src/Upload/src/UploadDragger.vue
rename to src/upload/src/UploadDragger.vue
diff --git a/src/Upload/src/UploadFile.vue b/src/upload/src/UploadFile.vue
similarity index 100%
rename from src/Upload/src/UploadFile.vue
rename to src/upload/src/UploadFile.vue
diff --git a/src/Upload/src/UploadProgress.vue b/src/upload/src/UploadProgress.vue
similarity index 100%
rename from src/Upload/src/UploadProgress.vue
rename to src/upload/src/UploadProgress.vue
diff --git a/src/upload/src/styles/index.js b/src/upload/src/styles/index.js
new file mode 100644
index 000000000..958d3000d
--- /dev/null
+++ b/src/upload/src/styles/index.js
@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]
diff --git a/src/upload/src/styles/themed-base.cssr.js b/src/upload/src/styles/themed-base.cssr.js
new file mode 100644
index 000000000..958c927f6
--- /dev/null
+++ b/src/upload/src/styles/themed-base.cssr.js
@@ -0,0 +1,222 @@
+import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
+import fadeInHeightExpand from '../../../styles/_transitions/fade-in-height-expand'
+import createIconSwitchTransition from '../../../styles/_transitions/icon-switch'
+
+export default c([
+  ({ props }) => {
+    const {
+      easeInOutCubicBezier,
+      borderRadius
+    } = props.$base
+    const {
+      uploadDraggerBackgroundColor,
+      uploadDraggerBorderColorHover,
+      uploadFileItemBackgroundColorHover,
+      uploadFileItemBackgroundColorErrorHover,
+      uploadInfoTextColorError,
+      uploadInfoTextColorSuccess,
+      uploadInfoTextColor,
+      uploadInfoIconColor,
+      uploadDisabledOpacity,
+      uploadDraggerBorderColor
+    } = props.$local
+    const iconSwitchTransition = createIconSwitchTransition()
+
+    return cTB('upload', [
+      cE('file-input', {
+        raw: `
+          display: block;
+          width: 0;
+          height: 0;
+          opacity: 0;
+        `
+      }),
+      cE('activator', {
+        raw: `
+          display: inline-block;
+        `
+      }),
+      cM('dragger-inside', [
+        cE('activator', {
+          raw: `
+            display: block;
+          `
+        })
+      ]),
+      cB('upload-dragger', {
+        raw: `
+          cursor: pointer;
+          box-sizing: border-box;
+          width: 100%;
+          text-align: center;
+          border-radius: ${borderRadius};
+          padding: 24px;
+          transition:
+            border-color .3s ${easeInOutCubicBezier},
+            background-color .3s ${easeInOutCubicBezier};
+          background-color: ${uploadDraggerBackgroundColor};
+          border: 1px dashed ${uploadDraggerBorderColor};
+        `
+      }, [
+        c('&:hover', {
+          raw: `
+            border-color:${uploadDraggerBorderColorHover};
+          `
+        })
+      ]),
+      cB('upload-file-list', {
+        raw: `
+          margin-top: 8px;
+          line-height: 1.75;
+        `
+      }, [
+        cB('upload-file', {
+          raw: `
+            display: block;
+            box-sizing: border-box;
+            cursor: default;
+            padding: 0px 12px 0 6px;
+            transition: background-color .3s  ${easeInOutCubicBezier};
+            border-radius: ${borderRadius};
+          `
+        }, [
+          fadeInHeightExpand(),
+          cB('progress', {
+            raw: `
+              box-sizing: border-box;
+              padding-bottom: 6px;
+              margin-bottom: 6px;
+            `
+          }, [
+            fadeInHeightExpand({
+              foldPadding: true
+            })
+          ]),
+          c('&:hover', {
+            raw: `
+              background-color: ${uploadFileItemBackgroundColorHover};
+            `
+          }, [
+            cB('upload-file-info', [
+              cE('action', {
+                raw: `
+                  opacity: 1;
+                `
+              })
+            ])
+          ]),
+          cM('error-status', [
+            c('&:hover', {
+              raw: `
+                background-color: ${uploadFileItemBackgroundColorErrorHover};
+              `
+            }),
+            cB('upload-file-info', [
+              cE('name', {
+                raw: `color: ${uploadInfoTextColorError}`
+              })
+            ])
+          ]),
+          cM('with-url', {
+            raw: `
+              cursor: pointer;
+            `
+          }, [
+            cB('upload-file-info', [
+              cE('name', {
+                raw: `
+                  text-decoration: underline;
+                  color: ${uploadInfoTextColorSuccess};
+                  text-decoration-color: ${uploadInfoTextColorSuccess};
+                `
+              })
+            ])
+          ]),
+          cB('upload-file-info', {
+            raw: `
+              position: relative;
+              padding-top: 6px;
+              padding-bottom: 6px;
+            `
+          }, [
+            cE('action', {
+              raw: `
+                padding-top: inherit;
+                padding-bottom: inherit;
+                position: absolute;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                width: 80px;
+                display: flex;
+                align-items: center;
+                transition: opacity .2s ${easeInOutCubicBezier};
+                flex-direction: row-reverse;
+                opacity: 0;
+              `
+            }, [
+              cB('button', [
+                cB('icon', [
+                  c('svg', [
+                    iconSwitchTransition
+                  ])
+                ])
+              ])
+            ]),
+            cE('name', {
+              raw: `
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-decoration: underline;
+                text-decoration-color: transparent;
+                font-size: 14px;
+                transition:
+                  color .3s ${easeInOutCubicBezier},
+                  text-decoration-color .3s ${easeInOutCubicBezier};
+                color: ${uploadInfoTextColor};    
+              `
+            }, [
+              cB('icon', {
+                raw: `
+                  font-size: 18px;
+                  margin-right: 2px;
+                  vertical-align: middle;
+                  fill: ${uploadInfoIconColor};
+                  stroke: ${uploadInfoIconColor};
+                `
+              })
+            ])
+          ])
+        ])
+      ]),
+      cM('disabled', {
+        raw: `
+          opacity: ${uploadDisabledOpacity}
+        `
+      }, [
+        cE('activator', {
+          raw: `
+            cursor: not-allowed;
+          `
+        }),
+        cB('upload-file-list', {
+          raw: `
+            cursor: not-allowed;
+          `
+        }),
+        cB('upload-dragger', {
+          raw: `
+            cursor: not-allowed;
+          `
+        })
+      ]),
+      cM('drag-over', [
+        cB('upload-dragger', {
+          raw: `
+            border-color: ${uploadDraggerBorderColorHover};
+          `
+        })
+      ])
+    ])
+  }
+])
diff --git a/src/upload/styles/dark.js b/src/upload/styles/dark.js
new file mode 100644
index 000000000..d1cb97879
--- /dev/null
+++ b/src/upload/styles/dark.js
@@ -0,0 +1,36 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../_utils/color'
+
+export default create({
+  name: 'Upload',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      iconOverlayColor,
+      primaryColor,
+      errorColor,
+      secondaryTextColor,
+      successColor,
+      disabledOpacity,
+      actionBackgroundOverlayColor,
+      borderColor
+    } = derived
+
+    return {
+      uploadDraggerBackgroundColor: actionBackgroundOverlayColor,
+      uploadDraggerBorderColor: borderColor,
+      uploadDraggerBorderColorHover: primaryColor,
+      uploadFileItemBackgroundColorHover: changeColor(primaryColor, {
+        alpha: 0.15
+      }),
+      uploadFileItemBackgroundColorErrorHover: changeColor(errorColor, {
+        alpha: 0.15
+      }),
+      uploadInfoTextColor: secondaryTextColor,
+      uploadInfoTextColorError: errorColor,
+      uploadInfoTextColorSuccess: successColor,
+      uploadInfoIconColor: iconOverlayColor,
+      uploadDisabledOpacity: disabledOpacity
+    }
+  }
+})
diff --git a/src/upload/styles/light.js b/src/upload/styles/light.js
new file mode 100644
index 000000000..b78923604
--- /dev/null
+++ b/src/upload/styles/light.js
@@ -0,0 +1,36 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../_utils/color'
+
+export default create({
+  name: 'Upload',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      iconOverlayColor,
+      primaryColor,
+      errorColor,
+      secondaryTextColor,
+      successColor,
+      disabledOpacity,
+      actionBackgroundOverlayColor,
+      borderColor
+    } = derived
+
+    return {
+      uploadDraggerBackgroundColor: actionBackgroundOverlayColor,
+      uploadDraggerBorderColor: borderColor,
+      uploadDraggerBorderColorHover: primaryColor,
+      uploadFileItemBackgroundColorHover: changeColor(primaryColor, {
+        alpha: 0.1
+      }),
+      uploadFileItemBackgroundColorErrorHover: changeColor(errorColor, {
+        alpha: 0.1
+      }),
+      uploadInfoTextColor: secondaryTextColor,
+      uploadInfoTextColorError: errorColor,
+      uploadInfoTextColorSuccess: successColor,
+      uploadInfoIconColor: iconOverlayColor,
+      uploadDisabledOpacity: disabledOpacity
+    }
+  }
+})