fix: fix the abort of upload

1. Fix the `canToken` to `cancelToken`
2. Show abort button if it's not modal form

Change-Id: I24f5b1632e68baaa04d9f0ed7e11ebc74f48e1bb

src/components/Form/index.jsx

@@ -474,7 +474,7 @@ export default class BaseForm extends React.Component {
   getUploadRequestConf = () => {
     return {
       onUploadProgress: this.onUploadProgress,
-      canToken: this.cancelToken,
+      cancelToken: this.cancelToken,
     };
   };
 
@@ -637,6 +637,17 @@ export default class BaseForm extends React.Component {
     );
   }
 
+  renderAbortButton() {
+    if (!this.isSubmitting || this.isModal) {
+      return null;
+    }
+    return (
+      <Button className={styles.cancel} onClick={this.onClickCancel}>
+        {t('Abort Upload')}
+      </Button>
+    );
+  }
+
   renderSubmittingTip() {
     if (!this.hasRequestCancelCallback) {
       return;
@@ -648,6 +659,7 @@ export default class BaseForm extends React.Component {
         <div className={styles['progress-wrapper']}>
           <Progress percent={percent} size="small" />
         </div>
+        {this.renderAbortButton()}
       </div>
     );
   }

src/locales/en.json

@@ -42,6 +42,7 @@
   "ARM Architecture": "ARM Architecture",
   "Abandon Stack": "Abandon Stack",
   "Abandoning this stack will preserve the resources deployed by the stack.": "Abandoning this stack will preserve the resources deployed by the stack.",
+  "Abort Upload": "Abort Upload",
   "Accept Volume Transfer": "Accept Volume Transfer",
   "Access Control": "Access Control",
   "Access Key": "Access Key",

src/locales/zh.json

@@ -42,6 +42,7 @@
   "ARM Architecture": "ARM架构",
   "Abandon Stack": "废弃堆栈",
   "Abandoning this stack will preserve the resources deployed by the stack.": "废弃此堆栈将保留堆栈部署的资源。",
+  "Abort Upload": "取消上传",
   "Accept Volume Transfer": "接受云硬盘转让",
   "Access Control": "访问控制",
   "Access Key": "访问密钥",