@gsp-svc/formdoc-upload 0.1.39 → 0.2.1

package/fesm2015/gsp-svc-formdoc-upload.js

@@ -4,12 +4,12 @@ import { of } from 'rxjs/observable/of';
 import { catchError, tap, map } from 'rxjs/operators';
 import { UUID } from 'angular2-uuid';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { MessagerService, MessagerModule } from '@farris/ui-messager';
 import { LoadingService, LoadingModule } from '@farris/ui-loading';
 import { ProgressModule } from '@farris/ui-progress';
 import { FormsModule } from '@angular/forms';
 import { ComboListModule } from '@farris/ui-combo-list';
+import { FarrisFormsModule } from '@farris/ui-forms';
 import { CacheService, HttpService, LanguageService, SessionService } from '@ecp-caf/caf-common';
 import { Injectable, Pipe, Inject, LOCALE_ID, Component, Injector, ComponentFactoryResolver, ViewChild, Input, NgModule, defineInjectable } from '@angular/core';
 import { BsModalService } from '@farris/ui-modal';
@@ -99,13 +99,6 @@ DocType[DocType.Txt] = 'Txt';
 DocType[DocType.Image] = 'Image';
 DocType[DocType.Other] = 'Other';
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class GspFormDocInfo {
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -435,28 +428,9 @@ class UploadService {
      * @param {?} rootId
      * @return {?}
      */
-    getRootSetting(rootId) {
-        /** @type {?} */
-        let url = "/api/runtime/dfs/v1.0/rootsetting/" + rootId;
-        return this.http.get(url).pipe(tap((/**
-         * @param {?} res
-         * @return {?}
-         */
-        res => { })), catchError((/**
-         * @param {?} error
-         * @return {?}
-         */
-        (error) => {
-            return of(error);
-        })));
-    }
-    /**
-     * @param {?} id
-     * @return {?}
-     */
-    getValidation(id) {
+    getUploadInfo(rootId) {
         /** @type {?} */
-        let url = "/api/runtime/dfs/v1.0/validation/" + id;
+        let url = "/api/runtime/dfs/v1.0/rootsetting/info?id=" + rootId;
         return this.http.get(url).pipe(tap((/**
          * @param {?} res
          * @return {?}
@@ -486,13 +460,6 @@ UploadService.ctorParameters = () => [
 class UploadFileInfo {
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class GspFormUploadEntity {
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -544,7 +511,8 @@ const LANG_RESOURCES = {
         'operation': '操作',
         'size': '大小',
         'close': '关闭',
-        'loading': '拼命加载中'
+        'loading': '拼命加载中',
+        'mismatchChunkSize': '文档分片上传部分丢失，请重新上传，如果多次上传失败，请联系管理员。'
     },
     'en-US': {
         'uploadFile': 'Upload File',
@@ -572,7 +540,8 @@ const LANG_RESOURCES = {
         'operation': 'Operation',
         'size': 'Size',
         'close': 'Close',
-        'loading': 'Loading'
+        'loading': 'Loading',
+        'mismatchChunkSize': 'The partial upload of document shards is missing. Please upload again. If multiple uploads fail, please contact the administrator.'
     },
     'en': {
         'uploadFile': 'Upload File',
@@ -600,7 +569,8 @@ const LANG_RESOURCES = {
         'operation': 'Operation',
         'size': 'Size',
         'close': 'Close',
-        'loading': 'Loading'
+        'loading': 'Loading',
+        'mismatchChunkSize': 'The partial upload of document shards is missing. Please upload again. If multiple uploads fail, please contact the administrator.'
     },
     'zh-CHT': {
         'uploadFile': '上傳文件',
@@ -628,7 +598,8 @@ const LANG_RESOURCES = {
         'operation': '操作',
         'size': '大小',
         'close': '關閉',
-        'loading': '拼命加載中'
+        'loading': '拼命加載中',
+        'mismatchChunkSize': '文檔分片上傳部分遺失，請重新上傳，如果多次上傳失敗，請聯系管理員。'
     },
 };
 
@@ -668,6 +639,34 @@ LocalLangPipe.ctorParameters = () => [
 class GspDocSecurityBaseInfo {
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class InitMultiUploadRequest {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CompleteMultiUploadRequest {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class GspFormStreamEntity {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MultiUploadRequest {
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -693,7 +692,7 @@ class FileUploadComponent {
         this.beyondFileList = [];
         this.showType = 0;
         this.mouseOn = false;
-        this.bufferSize = 10 * 1024 * 1024;
+        this.bufferSize = 5 * 1024 * 1024;
         this.selectedFileCount = 0;
         this.uploadIconAddress = '/platform/runtime/dfs/images/upload.svg';
         this.uploadLittleIconAddress = '/platform/runtime/dfs/images/uploadIcon.svg';
@@ -701,8 +700,6 @@ class FileUploadComponent {
         this.fileAllSelected = false;
         this.uploadProcess = { width: '0%' };
         this.fileTotalChunk = {};
-        //fileUploadState: { [key: string]: boolean } = {};
-        //flag: number = 0;
         this.requestArray = new Array;
         this.requestBodyArray = new Array;
         this.uploadedChunk = {};
@@ -783,14 +780,15 @@ class FileUploadComponent {
                 this.haveExtensionProperty = true;
             }
         }));
-        this.uploadService.getRootSetting(this.rootId).subscribe((/**
+        this.uploadService.getUploadInfo(this.rootId).subscribe((/**
          * @param {?} res
          * @return {?}
          */
         res => {
             if (res != null && res.error == null) {
                 this.sameNameAllowed = res.sameNameAllowed;
-                this.validationId = res.validationId;
+                this.maxFileSize = parseInt(JSON.parse(res.validateConfiguration).maxFileSize);
+                this.allowedMultiUpload = res.allowedMultiUpload;
                 if (!this.sameNameAllowed) {
                     this.uploadService.getUploadedFileInfoList(this.formId, this.rootId).subscribe((/**
                      * @param {?} res
@@ -803,18 +801,10 @@ class FileUploadComponent {
                         }
                     }));
                 }
-                this.uploadService.getValidation(this.validationId).subscribe((/**
-                 * @param {?} res
-                 * @return {?}
-                 */
-                res => {
-                    this.maxFileSize = parseInt(JSON.parse(res.configuration).maxFileSize);
-                }));
             }
         }));
-        if (this.oldIdList != null && this.oldIdList.length > 0) {
-            this.uploadService.cancel(this.oldIdList, this.rootId).subscribe();
-        }
+        if (this.oldIdList != null && this.oldIdList.length > 0) ;
+        this.radioButtonGroupValue = 'showByGroup';
     }
     /**
      * @return {?}
@@ -831,11 +821,6 @@ class FileUploadComponent {
      * @return {?}
      */
     fileSelected($event) {
-        // const loading = this.loadService.show({
-        //   message: this.localepipe.transform('uploading')
-        // });
-        // this.totalLoad.close();
-        // this.totalLoad = null;
         this.hasSelectedFile = true;
         this.selectedFiles = document.querySelector('#file');
         if (this.fileCount > 0) {
@@ -869,11 +854,6 @@ class FileUploadComponent {
                  * @return {?}
                  */
                 x => x.fileName == selectedFile.name)) != null) {
-                    // this.uploadedNameList.push(selectedFile.name);
-                    // this.msgService.question('之前已上传过同名文件: ' + selectedFile.name + '，需要替换么？', () => {
-                    //   uuid = this.uploadedFileInfoList.find(x => x.fileName == selectedFile.name).metadataId;
-                    //   this.uploadFile(uuid, selectedFile);
-                    // })
                     /** @type {?} */
                     const msg = this.msgService.show('warning', this.localepipe.transform('haveSameName') + selectedFile.name, {
                         initialState: {
@@ -956,11 +936,6 @@ class FileUploadComponent {
             }
             this.uploadFile(uuid, selectedFile, selectedFile.name);
         }
-        // if (this.uploadedNameList.length > 0) {
-        //   let name: string = this.listToString(this.uploadedNameList);
-        //   this.msgService.warning('之前已上传过同名文件: ' + name + '请重新选择上传文件。');
-        //   this.uploadedNameList = [];
-        // }
         if (this.errFileList.length > 0) {
             /** @type {?} */
             let name = this.listToString(this.errFileList);
@@ -981,11 +956,6 @@ class FileUploadComponent {
             this.msgService.warning(name + this.localepipe.transform('sizeMax') + this.maxFileSize + "KB" + this.localepipe.transform('rechooseFile'));
             this.beyondFileList = [];
         }
-        // if (this.errTypeList.length > 0) {
-        //   let type: string = this.listToString(this.errTypeList);
-        //   this.msgService.warning('不支持上传类型为 ' + type + '的文件请重新选择上传文件。');
-        //   this.errTypeList = [];
-        // }
         this.files = this.files.slice();
         this.fileAllSelected = false;
         $event.target.value = '';
@@ -1073,60 +1043,145 @@ class FileUploadComponent {
         /** @type {?} */
         let fileInfo = this.handleFileInfo(uuid, selectedFile, fileName);
         /** @type {?} */
-        let chunkTotal = Math.ceil(selectedFile.size / this.bufferSize);
-        /** @type {?} */
-        let chunkIndex = 0;
-        this.fileTotalChunk[uuid] = chunkTotal;
-        /** @type {?} */
         let uploadFileInfo = new UploadFileInfo();
         uploadFileInfo.metadataId = uuid;
         uploadFileInfo.fileName = fileInfo.name;
-        uploadFileInfo.fileSize = fileInfo.size;
+        uploadFileInfo.fileSize = fileInfo.fileSize;
         uploadFileInfo.state = state;
         uploadFileInfo.securityInfo = this.securityInfoList[0];
-        while (chunkIndex < chunkTotal) {
-            /** @type {?} */
-            let uploadInfo = new GspFormUploadEntity;
-            uploadInfo.formId = this.formId;
-            uploadInfo.mode = OperatingModes.Temp;
-            uploadInfo.rootId = this.rootId;
-            /** @type {?} */
-            let docInfo = new GspFormDocInfo;
-            docInfo.fileName = fileName;
-            docInfo.metadataId = uuid;
-            docInfo.total = chunkTotal;
-            this.uploadedChunk[docInfo.metadataId] = 0;
-            /** @type {?} */
-            let nextSize = Math.min((chunkIndex + 1) * this.bufferSize, selectedFile.size);
+        //判断是否支持分片上传
+        if (this.allowedMultiUpload) {
+            //支持分片上传
             /** @type {?} */
-            let fileData = selectedFile.slice(chunkIndex * this.bufferSize, nextSize);
-            // let reader = new FileReader();
-            // reader.readAsBinaryString(fileData);
+            let initRequest = new InitMultiUploadRequest;
+            initRequest.path = this.formId;
+            initRequest.metadataId = uuid;
+            initRequest.rootId = this.rootId;
+            initRequest.size = fileInfo.fileSize;
+            initRequest.fileName = fileName;
+            //初始化分片
+            this.initMultiUpload(initRequest).subscribe((/**
+             * @param {?} res
+             * @return {?}
+             */
+            res => {
+                if (res.error != null) {
+                    this.files[this.files.indexOf(fileInfo)].uploadResult = false;
+                    this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                    this.files[this.files.indexOf(fileInfo)].errorMessage = res.error.Message;
+                }
+                else {
+                    /** @type {?} */
+                    let uploadId = res.uploadId;
+                    /** @type {?} */
+                    let chunkTotal = Math.ceil(selectedFile.size / this.bufferSize);
+                    /** @type {?} */
+                    let chunkIndex = 0;
+                    /** @type {?} */
+                    let multiResultList = [];
+                    this.fileTotalChunk[uuid] = chunkTotal;
+                    this.uploadedChunk[uuid] = 0;
+                    while (chunkIndex < chunkTotal) {
+                        /** @type {?} */
+                        let nextSize = Math.min((chunkIndex + 1) * this.bufferSize, selectedFile.size);
+                        /** @type {?} */
+                        let fileData = selectedFile.slice(chunkIndex * this.bufferSize, nextSize);
+                        /** @type {?} */
+                        let multiRequest = new MultiUploadRequest;
+                        multiRequest.metadataId = uuid;
+                        multiRequest.rootId = this.rootId;
+                        multiRequest.uploadId = uploadId;
+                        multiRequest.index = chunkIndex;
+                        multiRequest.total = chunkTotal;
+                        multiRequest.size = fileData.size;
+                        /** @type {?} */
+                        let formData = new FormData();
+                        formData.append('multiRequest', JSON.stringify(multiRequest));
+                        formData.append('file', fileData);
+                        this.multiUpload(formData).subscribe((/**
+                         * @param {?} res
+                         * @return {?}
+                         */
+                        res => {
+                            if (res.error != null) {
+                                this.files[this.files.indexOf(fileInfo)].uploadResult = false;
+                                this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                                this.files[this.files.indexOf(fileInfo)].errorMessage = res.error.Message;
+                            }
+                            else {
+                                multiResultList.push(res.result);
+                                this.uploadedChunk[uuid]++;
+                                this.files[this.files.indexOf(fileInfo)].uploadProcess = Number.parseInt((this.uploadedChunk[uuid] / this.fileTotalChunk[uuid] * 100).toFixed(0));
+                                if (this.uploadedChunk[uuid] == this.fileTotalChunk[uuid]) {
+                                    if (multiResultList.length == this.fileTotalChunk[uuid]) {
+                                        this.files[this.files.indexOf(fileInfo)].uploadResult = true;
+                                        this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                                        this.uploadFileInfoList = this.uploadFileInfoList.concat(uploadFileInfo);
+                                        this.uploadedFileInfoList = this.uploadedFileInfoList.concat(uploadFileInfo);
+                                        this.uploadedFileTotal++;
+                                        /** @type {?} */
+                                        let completeMultiUploadRequest = new CompleteMultiUploadRequest;
+                                        completeMultiUploadRequest.metadataId = uuid;
+                                        completeMultiUploadRequest.partList = multiResultList;
+                                        completeMultiUploadRequest.rootId = this.rootId;
+                                        completeMultiUploadRequest.uploadId = uploadId;
+                                        completeMultiUploadRequest.size = fileInfo.fileSize;
+                                        if (this.haveExtensionProperty)
+                                            completeMultiUploadRequest.exPropertyName = this.defaultPropertyName;
+                                        this.completeMultiUpload(completeMultiUploadRequest).subscribe((/**
+                                         * @param {?} res
+                                         * @return {?}
+                                         */
+                                        res => {
+                                        }));
+                                        //后台异步拼接文档
+                                    }
+                                    else {
+                                        this.files[this.files.indexOf(fileInfo)].uploadResult = false;
+                                        this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                                        this.files[this.files.indexOf(fileInfo)].errorMessage = this.localepipe.transform('mismatchChunkSize');
+                                    }
+                                }
+                            }
+                        }));
+                        chunkIndex = chunkIndex + 1;
+                    }
+                }
+            }));
+        }
+        else {
             /** @type {?} */
-            let innerIndex = chunkIndex;
-            // reader.onload = () => {
-            //   docInfo.fileContent = btoa(reader.result.toString());
-            docInfo.size = selectedFile.size;
-            docInfo.index = innerIndex;
-            docInfo.fileContent = "";
-            //chunkIndex++;
+            let entity = new GspFormStreamEntity;
+            entity.formId = this.formId;
+            entity.metadataId = uuid;
+            entity.mode = OperatingModes.Temp;
+            entity.rootId = this.rootId;
+            entity.size = selectedFile.size;
+            entity.fileName = fileName;
             if (this.haveExtensionProperty)
-                docInfo.exPropertyName = this.defaultPropertyName;
-            //docInfo.isLast = true;
-            uploadInfo.docInfo = docInfo;
-            // let info = uploadInfo;
-            // this.requestArray.push(this.uploadService.uploadFile(uploadInfo));
-            // this.requestBodyArray.push(info);
-            //封装请求formdata
+                entity.exPropertyName = this.defaultPropertyName;
             /** @type {?} */
             let formData = new FormData();
-            formData.append('uploadInfo', JSON.stringify(uploadInfo));
-            formData.append('docInfo', JSON.stringify(docInfo));
-            formData.append('file', fileData);
-            this.sendUploadRequest(formData, fileInfo, docInfo, uploadFileInfo);
-            // }
-            //console.log(chunkIndex + 1);
-            chunkIndex = chunkIndex + 1;
+            formData.append('uploadEntity', JSON.stringify(entity));
+            formData.append('file', selectedFile);
+            this.uploadSingleFile(formData).subscribe((/**
+             * @param {?} res
+             * @return {?}
+             */
+            res => {
+                if (res != null) {
+                    this.files[this.files.indexOf(fileInfo)].uploadResult = false;
+                    this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                    this.files[this.files.indexOf(fileInfo)].errorMessage = res.error.Message;
+                }
+                else {
+                    this.files[this.files.indexOf(fileInfo)].uploadResult = true;
+                    this.files[this.files.indexOf(fileInfo)].isUploading = false;
+                    this.uploadFileInfoList = this.uploadFileInfoList.concat(uploadFileInfo);
+                    this.uploadedFileInfoList = this.uploadedFileInfoList.concat(uploadFileInfo);
+                    this.uploadedFileTotal++;
+                }
+            }));
         }
         /** @type {?} */
         let index = -1;
@@ -1144,39 +1199,27 @@ class FileUploadComponent {
             this.files.splice(index, 1);
             this.uploadFileInfoList.splice(index, 1);
             this.uploadedFileInfoList.splice(index, 1);
-            this.uploadedFileTotal--;
+            //this.uploadedFileTotal--;
         }
     }
     /**
-     * @param {?} formData
-     * @param {?} fileInfo
-     * @param {?} docInfo
-     * @param {?} uploadFileInfo
+     * @param {?} formdata
      * @return {?}
      */
-    sendUploadRequest(formData, fileInfo, docInfo, uploadFileInfo) {
-        this.uploadSliceFile(formData).subscribe((/**
+    uploadSingleFile(formdata) {
+        /** @type {?} */
+        let url = "/api/runtime/dfs/v1.0/formdoc/single";
+        return this.httpclient.post(url, formdata).pipe(tap((/**
          * @param {?} res
          * @return {?}
          */
-        res => {
-            if (res != null) {
-                this.files[this.files.indexOf(fileInfo)].uploadResult = false;
-                this.files[this.files.indexOf(fileInfo)].isUploading = false;
-                this.files[this.files.indexOf(fileInfo)].errorMessage = res.error.Message;
-            }
-            else {
-                this.uploadedChunk[docInfo.metadataId]++;
-                this.files[this.files.indexOf(fileInfo)].uploadProcess = Number.parseInt((this.uploadedChunk[docInfo.metadataId] / this.fileTotalChunk[docInfo.metadataId] * 100).toFixed(0));
-                if (this.uploadedChunk[docInfo.metadataId] == this.fileTotalChunk[docInfo.metadataId]) {
-                    this.files[this.files.indexOf(fileInfo)].uploadResult = true;
-                    this.files[this.files.indexOf(fileInfo)].isUploading = false;
-                    this.uploadFileInfoList = this.uploadFileInfoList.concat(uploadFileInfo);
-                    this.uploadedFileInfoList = this.uploadedFileInfoList.concat(uploadFileInfo);
-                    this.uploadedFileTotal++;
-                }
-            }
-        }));
+        res => { })), catchError((/**
+         * @param {?} error
+         * @return {?}
+         */
+        (error) => {
+            return of$1(error);
+        })));
     }
     /**
      * @param {?} formdata
@@ -1185,7 +1228,6 @@ class FileUploadComponent {
     uploadSliceFile(formdata) {
         /** @type {?} */
         let url = "/api/runtime/dfs/v1.0/formdoc/slice";
-        //url = "/api/runtime/dfs/v1.0/formdoc/list";
         return this.httpclient.post(url, formdata).pipe(tap((/**
          * @param {?} res
          * @return {?}
@@ -1198,6 +1240,63 @@ class FileUploadComponent {
             return of$1(error);
         })));
     }
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    initMultiUpload(request) {
+        /** @type {?} */
+        let url = "/api/runtime/dfs/v1.0/formdoc/multi/init";
+        return this.httpclient.post(url, request).pipe(tap((/**
+         * @param {?} res
+         * @return {?}
+         */
+        res => { })), catchError((/**
+         * @param {?} error
+         * @return {?}
+         */
+        (error) => {
+            return of$1(error);
+        })));
+    }
+    /**
+     * @param {?} formdata
+     * @return {?}
+     */
+    multiUpload(formdata) {
+        /** @type {?} */
+        let url = "/api/runtime/dfs/v1.0/formdoc/multi/upload";
+        return this.httpclient.post(url, formdata).pipe(tap((/**
+         * @param {?} res
+         * @return {?}
+         */
+        res => { })), catchError((/**
+         * @param {?} error
+         * @return {?}
+         */
+        (error) => {
+            return of$1(error);
+        })));
+    }
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    completeMultiUpload(request) {
+        /** @type {?} */
+        let url = "/api/runtime/dfs/v1.0/formdoc/multi/complete";
+        return this.httpclient.post(url, request).pipe(tap((/**
+         * @param {?} res
+         * @return {?}
+         */
+        res => { })), catchError((/**
+         * @param {?} error
+         * @return {?}
+         */
+        (error) => {
+            return of$1(error);
+        })));
+    }
     /**
      * @return {?}
      */
@@ -1208,8 +1307,6 @@ class FileUploadComponent {
              * @return {?}
              */
             element => {
-                // let obj: any = document.getElementById(element.name);
-                // obj.checked = true;
                 element.selectd = true;
             }));
             this.fileAllSelected = true;
@@ -1221,8 +1318,6 @@ class FileUploadComponent {
              * @return {?}
              */
             element => {
-                // let obj: any = document.getElementById(element.name);
-                // obj.checked = false;
                 element.selectd = false;
             }));
             this.fileAllSelected = false;
@@ -1304,9 +1399,6 @@ class FileUploadComponent {
             metadataList.push(element.id);
             this.files.splice(this.files.indexOf(element), 1);
             if (element.uploadResult) {
-                // let idList: string[] = [];
-                // idList.push(fileInfo.id);
-                // this.uploadService.cancel(idList, this.rootId).subscribe();
                 this.uploadFileInfoList.splice(this.uploadFileInfoList.indexOf(this.uploadFileInfoList.filter((/**
                  * @param {?} x
                  * @return {?}
@@ -1406,16 +1498,28 @@ class FileUploadComponent {
                     }
                     fileInfo.source = imgUrl;
                     this.files.push(fileInfo);
+                    //因为异步处理的差异，补偿一次删除
+                    /** @type {?} */
+                    let index = -1;
+                    this.files.forEach((/**
+                     * @param {?} x
+                     * @return {?}
+                     */
+                    x => {
+                        if (x.name == fileInfo.name) {
+                            if (index == -1)
+                                index = this.files.indexOf(x);
+                        }
+                    }));
+                    if (index != -1 && index != this.files.length - 1) {
+                        this.files.splice(index, 1);
+                        this.uploadFileInfoList.splice(index, 1);
+                        this.uploadedFileInfoList.splice(index, 1);
+                    }
                 });
             }
         }
     }
-    /**
-     * @param {?} selectdFile
-     * @return {?}
-     */
-    getImageUrl(selectdFile) {
-    }
     /**
      * @param {?} strList
      * @return {?}
@@ -1493,9 +1597,6 @@ class FileUploadComponent {
          * @return {?}
          */
         x => x.isUploading || x.uploadResult)).length) {
-            // this.notifyService.success(<NotifyOptions>{
-            //   msg: '保存成功！', timeout: 3000
-            // });
             this.msgService.warning(this.localepipe.transform('wait'));
             return of$1(false);
         }
@@ -1565,9 +1666,6 @@ class FileUploadComponent {
              */
             x => x.metadataId == file.id)), 1);
         }
-        // var obj:any = document.querySelector('#file');
-        // obj.files.remove();
-        //obj.value='';
     }
     /**
      * @param {?} size
@@ -1620,8 +1718,8 @@ class FileUploadComponent {
 FileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-file-upload',
-                template: "<div *ngIf=\"hasSelectedFile\">\n\n    <div class=\"farris-header\" style=\"height: 50px; width: 100%\">\n        <div class=\"btn btn-secondary upload_button\">\n            <img [src]=\"uploadLittleIconAddress\">\n            <span>{{'uploadFile' | locale}} </span>\n            <input type=\"file\" (focus)=\"showLoading()\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\"\n                title=\"\" [accept]=\"fileType\">\n        </div>\n\n\n        <button *ngIf=\"showType==0 && !fileAllSelected && files.length >0 \" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"selectAllFile()\">{{'selectAll' | locale}}</button>\n        <button *ngIf=\"showType==0 && fileAllSelected  && files.length >0 \" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"selectAllFile()\">{{'selectNull' | locale}}</button>\n        <button *ngIf=\"showType==0 && selectedFileCount>0\" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"listMultipleDeleteFile()\">{{'delete' | locale}}</button>\n\n        <button *ngIf=\"showType==1 && selectedFileCount>0\" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"listMultipleDeleteFile()\">{{'delete' | locale}}</button>\n\n        <kendo-buttongroup [selection]=\"'single'\" class=\"button_group_upload \"\n            style=\"background-color: #ffffff; color: #388FFF;border: 1px solid #ddd;\" look=\"flat\">\n            <button kendoButton [selected]=\"true\" [toggleable]=\"true\"\n                [imageUrl]=\"'/platform/runtime/dfs/images/piclist.png'\" (click)=\"showByGroup()\"></button>\n            <button kendoButton [toggleable]=\"true\" [imageUrl]=\"'/platform/runtime/dfs/images/queuelist.png'\"\n                (click)=\"showByList()\"></button>\n        </kendo-buttongroup>\n\n\n    </div>\n\n    <!-- <div class=\"progress\" style=\"height: 12px;\">\n    <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"uploadProcess\"></div>\n  </div> -->\n\n    <div class=\"pic_list\" *ngIf=\"showType==0\">\n        <ul *ngFor=\"let file of files\">\n            <li (mouseenter)=\"mouseOver(file)\" (mouseleave)=\"mouseOut(file)\">\n                <div *ngIf=\"file.isUploading\">\n                    <farris-progress [type]=\"'circle'\" [percent]=\"file.uploadProcess\" [strokeLinecap]=\"'square'\"\n                        [status]=\"'active'\"></farris-progress>\n                </div>\n\n                <table *ngIf=\"!file.uploadResult && !file.isUploading\"\n                    style=\"margin: 0 auto; border: 1px solid #ddd; width: 135px; height: 160px;\">\n                    <tr style=\"margin: 0 auto ; height: 80px;\">\n                        <td style=\"text-align: center\"><span class=\"f-icon f-icon-warn\"></span></td>\n                    </tr>\n                    <tr style=\"margin: 0 auto ; height: 30px;\">\n                        <td style=\"text-align: center\"> {{'uploadFailure' | locale}} </td>\n                    </tr>\n                    <tr>\n                        <td style=\"text-align: center\"><button style=\"margin: 0 auto ; height: 20px; \"\n                                class=\"btn-link btn ng-star-inserted\" (click)=\"showErrorMessage(file)\">{{'detail' |\n                                locale}}</button></td>\n                    </tr>\n                </table>\n                <div *ngIf=\"!file.isUploading && file.uploadResult\" style=\"border: 1px solid #ddd;\">\n                    <img [src]='file.source'>\n                    <div *ngIf=\"haveExtensionProperty\"\n                        style=\"width: 133px; height: 25px; background-color: white; position: absolute;bottom: 0; \">\n\n                        <div style=\"width: 100px;height: 25px;position:absolute;margin: 0 17px;\">\n                            <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"propertiesNames\"\n                                [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"typeChange($event,file)\"\n                                [enableClear]=\"false\">\n                                <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                            </farris-combo-list>\n                        </div>\n                    </div>\n                    <div *ngIf=\"haveSecurityInfo\"\n                        style=\"width: 133px; height: 25px; background-color: white; position: absolute;bottom: 0; \">\n\n                        <div style=\"width: 100px;height: 25px;position:absolute;margin: 0 17px;\">\n                            <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"securityInfoList\"\n                                [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"securityChange($event,file)\"\n                                [enableClear]=\"false\">\n                                <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                            </farris-combo-list>\n                        </div>\n                    </div>\n                </div>\n                <table *ngIf=\"!file.isUploading\">\n                    <tr style=\"height: 20px\">\n                        <td style=\"width: 15px; vertical-align: middle; text-align: center\">\n                            <!-- <input type=\"checkbox\" [id]=\"file.name\" (click)=\"checkoutSelectFile(file.name)\">  -->\n                            <div class=\"farris-input-wrap\" style=\"height: 20px\" (click)=\"checkoutSelectFile(file)\">\n                                <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0;height: 20px;\"\n                                    [ngStyle]=\"checkboxPos\">\n                                    <input class=\"custom-control-input\" type=\"checkbox\" [id]=\"file.name\"\n                                        [(ngModel)]=\"file.selectd\">\n                                    <label class=\"custom-control-label\"\n                                        style=\"padding: 0 0 10px 0; position: relative; top: -8px;\"></label>\n                                </div>\n                            </div>\n                        </td>\n                        <td style=\"width: 120px; vertical-align: middle; text-align: center\" [title]=\"file.name\">\n                            {{file.picListDisplayName}}</td>\n                    </tr>\n                </table>\n                <!-- <span>{{file.picListDisplayName}}</span> -->\n                <!-- <p class=\"filename\">{{file.picListDisplayName}}</p> -->\n                <button *ngIf=\"!file.isUploading && file.mouseOn\"\n                    style=\"position: absolute; top: 0; right: 0px; width: 24px; height: 24px;\" kendoButton\n                    [icon]=\"'delete'\" (click)=\"listDeleteFile(file)\"></button>\n                <!-- <button *ngIf=\"file.hasUploaded\" class=\"k-primary\" kendoButton [icon]=\"'check'\" [disabled]=\"true\"></button> -->\n            </li>\n        </ul>\n        <br>\n    </div>\n\n    <div class=\"queue_list\" *ngIf=\"showType==1\">\n        <table>\n            <tr style=\"height: 50px; table-layout:fixed;\">\n                <th style=\"width: 40px; vertical-align: middle; text-align: center\">\n                    <!-- <input type=\"checkbox\" id=\"allCheckBox\" (click)=\"selectAllFile()\"> -->\n                    <div class=\"farris-input-wrap\" (click)=\"selectAllFile()\">\n                        <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0\">\n                            <input class=\"custom-control-input\" type=\"checkbox\" id=\"allCheckBox\"\n                                [(ngModel)]=\"fileAllSelected\">\n                            <label class=\"custom-control-label\" style=\"padding: 0\"></label>\n                        </div>\n                    </div>\n                </th>\n                <th style=\"vertical-align: middle\" [ngStyle]=\"queueListStyle\">{{'fileName' | locale}}</th>\n                <th style=\"width: 100px; vertical-align: middle\">{{'size' | locale}}</th>\n                <th style=\"width: 170px; vertical-align: middle; text-align: center\">{{'state' | locale}}</th>\n                <th *ngIf=\"haveExtensionProperty\" style=\"width: 100px; vertical-align: middle; text-align: center\">\n                    {{storageExtension.extensionName}}\n                </th>\n                <th style=\"width: 140px; vertical-align: middle; text-align: center\">{{'operation' | locale}}</th>\n            </tr>\n        </table>\n        <div style=\"height: 370px; overflow: auto;\">\n            <table>\n                <tr *ngFor=\"let file of files\" style=\"height: 40px\">\n                    <td colspan=\"5\" *ngIf=\"file.isUploading\">\n                        <!-- <div style=\"width:100%; display: table-cell; vertical-align: middle; text-align: center; \"> -->\n                        <div style=\"width: 500px;margin:0 auto\">\n                            <farris-progress [percent]=\"file.uploadProcess\" [status]=\"'active'\">\n                            </farris-progress>\n                        </div>\n\n                    </td>\n                    <td *ngIf=\"!file.isUploading\" style=\" width: 40px; vertical-align: middle; text-align: center\">\n                        <!-- <input type=\"checkbox\" [id]=\"file.name\" (click)=\"checkoutSelectFile(file.name)\"> -->\n                        <div class=\"farris-input-wrap\" (click)=\"checkoutSelectFile(file)\">\n                            <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0\">\n                                <input class=\"custom-control-input\" type=\"checkbox\" [id]=\"file.name\"\n                                    [(ngModel)]=\"file.selectd\">\n                                <label class=\"custom-control-label\" style=\"padding: 0\"></label>\n                            </div>\n                        </div>\n                    </td>\n                    <td *ngIf=\"!file.isUploading\" style=\"vertical-align: middle\" [ngStyle]=\"queueListStyle\">\n                        {{file.queueListDisplayName}}</td>\n                    <td *ngIf=\"!file.isUploading\" style=\"width: 100px; vertical-align: middle\">{{file.size}}</td>\n                    <td *ngIf=\"!file.isUploading\" style=\"text-align: center; width: 170px; vertical-align: middle;\">\n                        <table *ngIf=\"!file.uploadResult\" style=\"margin: 0 auto\">\n                            <tr style=\"margin: 0 auto\">\n                                <td><span class=\"f-icon f-icon-error\"></span></td>\n                                <td> {{'uploadFailure' | locale}} </td>\n                                <td><button style=\"height: 24px\" class=\"btn-link btn ng-star-inserted\"\n                                        (click)=\"showErrorMessage(file)\">{{'detail' | locale}}</button></td>\n                            </tr>\n                        </table>\n                        <!-- <span *ngIf=\"!file.uploadResult\"><span class=\"f-icon f-icon-error\"></span> \u4E0A\u4F20\u5931\u8D25 <button\n              class=\"btn-link btn ng-star-inserted\" (click)=\"showErrorMessage(file)\">\u8BE6\u60C5</button></span> -->\n                        <span *ngIf=\"file.uploadResult\"><span class=\"f-icon f-icon-success\"></span> {{'uploadSucceed' |\n                            locale}}</span>\n                    </td>\n                    <td *ngIf=\"!file.isUploading&&haveExtensionProperty\"\n                        style=\"text-align: center; width: 100px; vertical-align: middle;\">\n                        <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"propertiesNames\"\n                            [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"typeChange($event,file)\"\n                            [enableClear]=\"false\">\n                            <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                        </farris-combo-list>\n                    </td>\n                    <td *ngIf=\"!file.isUploading&&haveSecurityInfo\"\n                        style=\"text-align: center; width: 100px; vertical-align: middle;\">\n                        <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"securityInfoList\"\n                            [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"securityChange($event,file)\"\n                            [enableClear]=\"false\">\n                            <!-- <ng-template #itemTemp let-item>\n                            <div class=\"combo-list\">\n                                <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                <span class=\"combo-list-label\">{{item.label}}</span>\n                            </div>\n                        </ng-template> -->\n                        </farris-combo-list>\n                    </td>\n\n                    <td *ngIf=\"!file.isUploading\" style=\"text-align: center; width: 140px; vertical-align: middle;\">\n                        <!-- <button *ngIf=\"file.uploadResult\" class=\"btn-link btn ng-star-inserted\" (click)=\"retryUploadFile(file.name)\">\u91CD\u8BD5</button> -->\n                        <button class=\"btn-link btn ng-star-inserted\" style=\"margin: 0 auto\"\n                            (click)=\"listDeleteFile(file)\">{{'delete' | locale}}</button>\n                    </td>\n\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!hasSelectedFile\" class='home_page'>\n    <img [src]=\"uploadIconAddress\">\n    <div>\n        <span class=\"btn btn-primary btn-lg\">{{'uploadFile' | locale}} </span>\n        <input type=\"file\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\" title=\"\" [accept]=\"fileType\">\n        <!-- <input type=\"file\" (focus)=\"showLoading()\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\" title=\"\" [accept]=\"fileType\"> -->\n    </div>\n</div>",
-                styles: [".home_page{text-align:center}.home_page img{position:absolute;top:180px;margin-left:-35px;width:70px;height:56px}.home_page div{position:absolute;left:50%;top:255px;margin-left:-75px;width:150px;height:32px;overflow:hidden}.home_page div span{width:150px;height:32px;position:absolute;z-index:10;left:0}.home_page div input{position:absolute;left:0;top:0;opacity:0;filter:'alpha(opacity=0)';z-index:11}.upload_button{width:110px;height:32px;overflow:hidden}.upload_button span{position:relative;right:-4px;top:4px;width:56px;height:22px;font-size:14px}.upload_button input{height:32px;width:110px;position:absolute;left:22px;top:12px;opacity:0;filter:'alpha(opacity=0)';overflow:hidden}.upload_button img{position:relative;left:-6px;top:3px;width:14px;height:14px}.button_group_upload{position:absolute;right:18px;top:12px;height:26px;width:53px}.button_group_upload button{height:26px;width:26px}.fileinput-button{position:absolute;right:60px;bottom:40px;overflow:hidden;width:24px;height:24px;border-radius:12px;transform:scale(2.5);-ms-transform:scale(2.5);-moz-transform:scale(2.5);-webkit-transform:scale(2.5);-o-transform:scale(2.5);color:#0686fd}.fileinput-button input{position:absolute;left:0;top:0;opacity:0;filter:'alpha(opacity=0)'}.pic-droplist{height:24px;color:#e0e1e2;background-color:#e0e1e2}.pic-droplist input-group{display:table-cell;width:100px;text-align:center;border:0}.pic-droplist input-group div{border:0}.pic-droplist input-group div div,.pic-droplist input-group div input{background-color:#e0e1e2}.pic_list{padding:0;height:415px;overflow-y:auto;overflow-x:hidden}.pic_list ul{padding:0;list-style:none;width:100%;margin:20px 0 0 20px}.pic_list ul li{height:179px;width:135px;margin:8px 0 8px 12px;float:left;overflow:hidden;align-items:center;position:relative}.pic_list ul li div{width:135px;height:159px;margin:auto;display:table-cell;vertical-align:middle;text-align:center;position:relative}.pic_list ul li div img{max-width:120px;max-height:118px;align-items:center;margin:auto;vertical-align:middle;text-align:center}.pic_list ul li span.filename{width:100px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue_list{display:block;height:420px;overflow-y:auto}.file_list{list-style:none;margin:0;padding:0;overflow-x:hidden;overflow-y:auto}.file_list li{height:50px;line-height:35px;font-size:16px;position:relative}.file_list li button{float:right;top:6px;right:10px;width:20px}.file_list li p.title{padding:0 0 0 6px;margin:0 210px 0 0}.file_list li p.size{position:absolute;width:100px;top:0;right:100px}"]
+                template: "<div *ngIf=\"hasSelectedFile\">\n\n    <div class=\"farris-header\" style=\"height: 50px; width: 100%\">\n        <div class=\"btn btn-secondary upload_button\">\n            <img [src]=\"uploadLittleIconAddress\">\n            <span>{{'uploadFile' | locale}} </span>\n            <input type=\"file\" (focus)=\"showLoading()\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\"\n                title=\"\" [accept]=\"fileType\">\n        </div>\n\n\n        <button *ngIf=\"showType==0 && !fileAllSelected && files.length >0 \" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"selectAllFile()\">{{'selectAll' | locale}}</button>\n        <button *ngIf=\"showType==0 && fileAllSelected  && files.length >0 \" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"selectAllFile()\">{{'selectNull' | locale}}</button>\n        <button *ngIf=\"showType==0 && selectedFileCount>0\" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"listMultipleDeleteFile()\">{{'delete' | locale}}</button>\n\n        <button *ngIf=\"showType==1 && selectedFileCount>0\" style=\"padding-left: 20px\"\n            class=\"btn-link btn ng-star-inserted\" (click)=\"listMultipleDeleteFile()\">{{'delete' | locale}}</button>\n\n        <farris-radio-group class=\"button_group_upload\" [(model)]=\"radioButtonGroupValue\" [horizontal]=\"false\">\n            <farris-radio-button [label]=\"'showByGroup'\" (click)=\"showByGroup()\">\n                <span  class=\"f-icon f-icon-sudoku-new\"> </span>\n            </farris-radio-button>\n            <farris-radio-button [label]=\"'showByList'\" (click)=\"showByList()\">\n                <span  class=\"f-icon f-icon-page-title-define\"> </span>\n            </farris-radio-button>\n\n        </farris-radio-group>\n\n        <!-- <kendo-buttongroup [selection]=\"'single'\" class=\"button_group_upload \"\n            style=\"background-color: #ffffff; color: #388FFF;border: 1px solid #ddd;\" look=\"flat\">\n            <button kendoButton [selected]=\"true\" [toggleable]=\"true\"\n                [imageUrl]=\"'/platform/runtime/dfs/images/piclist.png'\" (click)=\"showByGroup()\"></button>\n            <button kendoButton [toggleable]=\"true\" [imageUrl]=\"'/platform/runtime/dfs/images/queuelist.png'\"\n                (click)=\"showByList()\"></button>\n        </kendo-buttongroup> -->\n\n\n    </div>\n\n    <!-- <div class=\"progress\" style=\"height: 12px;\">\n    <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"uploadProcess\"></div>\n  </div> -->\n\n    <div class=\"pic_list\" *ngIf=\"showType==0\">\n        <ul *ngFor=\"let file of files\">\n            <li (mouseenter)=\"mouseOver(file)\" (mouseleave)=\"mouseOut(file)\">\n                <div *ngIf=\"file.isUploading\">\n                    <farris-progress [type]=\"'circle'\" [percent]=\"file.uploadProcess\" [strokeLinecap]=\"'square'\"\n                        [status]=\"'active'\"></farris-progress>\n                </div>\n\n                <table *ngIf=\"!file.uploadResult && !file.isUploading\"\n                    style=\"margin: 0 auto; border: 1px solid #ddd; width: 135px; height: 160px;\">\n                    <tr style=\"margin: 0 auto ; height: 80px;\">\n                        <td style=\"text-align: center\"><span class=\"f-icon f-icon-warn\"></span></td>\n                    </tr>\n                    <tr style=\"margin: 0 auto ; height: 30px;\">\n                        <td style=\"text-align: center\"> {{'uploadFailure' | locale}} </td>\n                    </tr>\n                    <tr>\n                        <td style=\"text-align: center\"><button style=\"margin: 0 auto ; height: 20px; \"\n                                class=\"btn-link btn ng-star-inserted\" (click)=\"showErrorMessage(file)\">{{'detail' |\n                                locale}}</button></td>\n                    </tr>\n                </table>\n                <div *ngIf=\"!file.isUploading && file.uploadResult\" style=\"border: 1px solid #ddd;\">\n                    <img [src]='file.source'>\n                    <div *ngIf=\"haveExtensionProperty\"\n                        style=\"width: 133px; height: 25px; background-color: white; position: absolute;bottom: 0; \">\n\n                        <div style=\"width: 100px;height: 25px;position:absolute;margin: 0 17px;\">\n                            <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"propertiesNames\"\n                                [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"typeChange($event,file)\"\n                                [enableClear]=\"false\">\n                                <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                            </farris-combo-list>\n                        </div>\n                    </div>\n                    <div *ngIf=\"haveSecurityInfo\"\n                        style=\"width: 133px; height: 25px; background-color: white; position: absolute;bottom: 0; \">\n\n                        <div style=\"width: 100px;height: 25px;position:absolute;margin: 0 17px;\">\n                            <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"securityInfoList\"\n                                [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"securityChange($event,file)\"\n                                [enableClear]=\"false\">\n                                <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                            </farris-combo-list>\n                        </div>\n                    </div>\n                </div>\n                <table *ngIf=\"!file.isUploading\">\n                    <tr style=\"height: 20px\">\n                        <td style=\"width: 15px; vertical-align: middle; text-align: center\">\n                            <!-- <input type=\"checkbox\" [id]=\"file.name\" (click)=\"checkoutSelectFile(file.name)\">  -->\n                            <div class=\"farris-input-wrap\" style=\"height: 20px\" (click)=\"checkoutSelectFile(file)\">\n                                <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0;height: 20px;\"\n                                    [ngStyle]=\"checkboxPos\">\n                                    <input class=\"custom-control-input\" type=\"checkbox\" [id]=\"file.name\"\n                                        [(ngModel)]=\"file.selectd\">\n                                    <label class=\"custom-control-label\"\n                                        style=\"padding: 0 0 10px 0; position: relative; top: -8px;\"></label>\n                                </div>\n                            </div>\n                        </td>\n                        <td style=\"width: 120px; vertical-align: middle; text-align: center\" [title]=\"file.name\">\n                            {{file.picListDisplayName}}</td>\n                    </tr>\n                </table>\n                <!-- <span>{{file.picListDisplayName}}</span> -->\n                <!-- <p class=\"filename\">{{file.picListDisplayName}}</p> -->\n                <button *ngIf=\"!file.isUploading && file.mouseOn\"\n                    style=\"position: absolute; top: 0; right: 0px; width: 24px; height: 24px; border: none;\"\n                    (click)=\"listDeleteFile(file)\">\n                    <span style=\"position: relative;  right: 2px; \" class=\"f-icon f-icon-delete\"> </span>\n                </button>\n                <!-- <button *ngIf=\"file.hasUploaded\" class=\"k-primary\" kendoButton [icon]=\"'check'\" [disabled]=\"true\"></button> -->\n            </li>\n        </ul>\n        <br>\n    </div>\n\n    <div class=\"queue_list\" *ngIf=\"showType==1\">\n        <table>\n            <tr style=\"height: 50px; table-layout:fixed;\">\n                <th style=\"width: 40px; vertical-align: middle; text-align: center\">\n                    <!-- <input type=\"checkbox\" id=\"allCheckBox\" (click)=\"selectAllFile()\"> -->\n                    <div class=\"farris-input-wrap\" (click)=\"selectAllFile()\">\n                        <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0\">\n                            <input class=\"custom-control-input\" type=\"checkbox\" id=\"allCheckBox\"\n                                [(ngModel)]=\"fileAllSelected\">\n                            <label class=\"custom-control-label\" style=\"padding: 0\"></label>\n                        </div>\n                    </div>\n                </th>\n                <th style=\"vertical-align: middle\" [ngStyle]=\"queueListStyle\">{{'fileName' | locale}}</th>\n                <th style=\"width: 100px; vertical-align: middle\">{{'size' | locale}}</th>\n                <th style=\"width: 170px; vertical-align: middle; text-align: center\">{{'state' | locale}}</th>\n                <th *ngIf=\"haveExtensionProperty\" style=\"width: 100px; vertical-align: middle; text-align: center\">\n                    {{storageExtension.extensionName}}\n                </th>\n                <th style=\"width: 140px; vertical-align: middle; text-align: center\">{{'operation' | locale}}</th>\n            </tr>\n        </table>\n        <div style=\"height: 370px; overflow: auto;\">\n            <table>\n                <tr *ngFor=\"let file of files\" style=\"height: 40px\">\n                    <td colspan=\"5\" *ngIf=\"file.isUploading\">\n                        <!-- <div style=\"width:100%; display: table-cell; vertical-align: middle; text-align: center; \"> -->\n                        <div style=\"width: 500px;margin:0 auto\">\n                            <farris-progress [percent]=\"file.uploadProcess\" [status]=\"'active'\">\n                            </farris-progress>\n                        </div>\n\n                    </td>\n                    <td *ngIf=\"!file.isUploading\" style=\" width: 40px; vertical-align: middle; text-align: center\">\n                        <!-- <input type=\"checkbox\" [id]=\"file.name\" (click)=\"checkoutSelectFile(file.name)\"> -->\n                        <div class=\"farris-input-wrap\" (click)=\"checkoutSelectFile(file)\">\n                            <div class=\"custom-control custom-checkbox\" style=\"margin: 4px 0 0\">\n                                <input class=\"custom-control-input\" type=\"checkbox\" [id]=\"file.name\"\n                                    [(ngModel)]=\"file.selectd\">\n                                <label class=\"custom-control-label\" style=\"padding: 0\"></label>\n                            </div>\n                        </div>\n                    </td>\n                    <td *ngIf=\"!file.isUploading\" style=\"vertical-align: middle\" [ngStyle]=\"queueListStyle\">\n                        {{file.queueListDisplayName}}</td>\n                    <td *ngIf=\"!file.isUploading\" style=\"width: 100px; vertical-align: middle\">{{file.size}}</td>\n                    <td *ngIf=\"!file.isUploading\" style=\"text-align: center; width: 170px; vertical-align: middle;\">\n                        <table *ngIf=\"!file.uploadResult\" style=\"margin: 0 auto\">\n                            <tr style=\"margin: 0 auto\">\n                                <td><span class=\"f-icon f-icon-error\"></span></td>\n                                <td> {{'uploadFailure' | locale}} </td>\n                                <td><button style=\"height: 24px\" class=\"btn-link btn ng-star-inserted\"\n                                        (click)=\"showErrorMessage(file)\">{{'detail' | locale}}</button></td>\n                            </tr>\n                        </table>\n                        <!-- <span *ngIf=\"!file.uploadResult\"><span class=\"f-icon f-icon-error\"></span> \u4E0A\u4F20\u5931\u8D25 <button\n              class=\"btn-link btn ng-star-inserted\" (click)=\"showErrorMessage(file)\">\u8BE6\u60C5</button></span> -->\n                        <span *ngIf=\"file.uploadResult\"><span class=\"f-icon f-icon-success\"></span> {{'uploadSucceed' |\n                            locale}}</span>\n                    </td>\n                    <td *ngIf=\"!file.isUploading&&haveExtensionProperty\"\n                        style=\"text-align: center; width: 100px; vertical-align: middle;\">\n                        <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"propertiesNames\"\n                            [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"typeChange($event,file)\"\n                            [enableClear]=\"false\">\n                            <!-- <ng-template #itemTemp let-item>\n                                    <div class=\"combo-list\">\n                                        <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                        <span class=\"combo-list-label\">{{item.label}}</span>\n                                    </div>\n                                </ng-template> -->\n                        </farris-combo-list>\n                    </td>\n                    <td *ngIf=\"!file.isUploading&&haveSecurityInfo\"\n                        style=\"text-align: center; width: 100px; vertical-align: middle;\">\n                        <farris-combo-list [(ngModel)]=\"file.extensionDropListId\" [data]=\"securityInfoList\"\n                            [idField]=\"'id'\" [textField]=\"'name'\" (selectChange)=\"securityChange($event,file)\"\n                            [enableClear]=\"false\">\n                            <!-- <ng-template #itemTemp let-item>\n                            <div class=\"combo-list\">\n                                <span [class]=\"'combo-list-circle combo-list-'+item.state\"></span>\n                                <span class=\"combo-list-label\">{{item.label}}</span>\n                            </div>\n                        </ng-template> -->\n                        </farris-combo-list>\n                    </td>\n\n                    <td *ngIf=\"!file.isUploading\" style=\"text-align: center; width: 140px; vertical-align: middle;\">\n                        <!-- <button *ngIf=\"file.uploadResult\" class=\"btn-link btn ng-star-inserted\" (click)=\"retryUploadFile(file.name)\">\u91CD\u8BD5</button> -->\n                        <button class=\"btn-link btn ng-star-inserted\" style=\"margin: 0 auto\"\n                            (click)=\"listDeleteFile(file)\">{{'delete' | locale}}</button>\n                    </td>\n\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!hasSelectedFile\" class='home_page'>\n    <img [src]=\"uploadIconAddress\">\n    <div>\n        <span class=\"btn btn-primary btn-lg\">{{'uploadFile' | locale}} </span>\n        <input type=\"file\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\" title=\"\" [accept]=\"fileType\">\n        <!-- <input type=\"file\" (focus)=\"showLoading()\" (change)=\"fileSelected($event)\" id=\"file\" multiple=\"multiple\" title=\"\" [accept]=\"fileType\"> -->\n    </div>\n</div>",
+                styles: [".home_page{text-align:center}.home_page img{position:absolute;top:180px;margin-left:-35px;width:70px;height:56px}.home_page div{position:absolute;left:50%;top:255px;margin-left:-75px;width:150px;height:32px;overflow:hidden}.home_page div span{width:150px;height:32px;position:absolute;z-index:10;left:0}.home_page div input{position:absolute;left:0;top:0;opacity:0;filter:'alpha(opacity=0)';z-index:11}.upload_button{width:110px;height:32px;overflow:hidden}.upload_button span{position:relative;right:-4px;top:4px;width:56px;height:22px;font-size:14px}.upload_button input{height:32px;width:110px;position:absolute;left:22px;top:12px;opacity:0;filter:'alpha(opacity=0)';overflow:hidden}.upload_button img{position:relative;left:-6px;top:3px;width:14px;height:14px}.button_group_upload{position:absolute;right:18px;top:12px;height:26px;width:90px}.button_group_upload button{height:26px;width:26px}.fileinput-button{position:absolute;right:60px;bottom:40px;overflow:hidden;width:24px;height:24px;border-radius:12px;transform:scale(2.5);-ms-transform:scale(2.5);-moz-transform:scale(2.5);-webkit-transform:scale(2.5);-o-transform:scale(2.5);color:#0686fd}.fileinput-button input{position:absolute;left:0;top:0;opacity:0;filter:'alpha(opacity=0)'}.pic-droplist{height:24px;color:#e0e1e2;background-color:#e0e1e2}.pic-droplist input-group{display:table-cell;width:100px;text-align:center;border:0}.pic-droplist input-group div{border:0}.pic-droplist input-group div div,.pic-droplist input-group div input{background-color:#e0e1e2}.pic_list{padding:0;height:415px;overflow-y:auto;overflow-x:hidden}.pic_list ul{padding:0;list-style:none;width:100%;margin:20px 0 0 20px}.pic_list ul li{height:179px;width:135px;margin:8px 0 8px 12px;float:left;overflow:hidden;align-items:center;position:relative}.pic_list ul li div{width:135px;height:159px;margin:auto;display:table-cell;vertical-align:middle;text-align:center;position:relative}.pic_list ul li div img{max-width:120px;max-height:118px;align-items:center;margin:auto;vertical-align:middle;text-align:center}.pic_list ul li span.filename{width:100px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue_list{display:block;height:420px;overflow-y:auto}.file_list{list-style:none;margin:0;padding:0;overflow-x:hidden;overflow-y:auto}.file_list li{height:50px;line-height:35px;font-size:16px;position:relative}.file_list li button{float:right;top:6px;right:10px;width:20px}.file_list li p.title{padding:0 0 0 6px;margin:0 210px 0 0}.file_list li p.size{position:absolute;width:100px;top:0;right:100px}"]
             }] }
 ];
 /** @nocollapse */
@@ -1655,6 +1753,14 @@ class DownloadService {
     getDownloadUrl(metadataId, rootId) {
         return "/api/runtime/dfs/v1.0/doc/filecontent?metadataid=" + metadataId + "&rootid=" + rootId + "&token=" + this.getToken(this.mergeString(metadataId, rootId));
     }
+    /**
+     * @param {?} metadataId
+     * @param {?} rootId
+     * @return {?}
+     */
+    getStreamDownloadUrl(metadataId, rootId) {
+        return "/api/runtime/dfs/v1.0/formdoc/stream?metadataid=" + metadataId + "&rootid=" + rootId + "&token=" + this.getToken(this.mergeString(metadataId, rootId));
+    }
     /**
      * @param {?} metadataIdList
      * @param {?} rootId
@@ -1776,12 +1882,12 @@ UploadModule.decorators = [
                 declarations: [FileUploadComponent, LocalLangPipe],
                 imports: [
                     CommonModule,
-                    ButtonsModule,
                     NotifyModule,
                     MessagerModule.forRoot(),
                     LoadingModule.forRoot(),
                     ProgressModule,
                     FormsModule,
+                    FarrisFormsModule,
                     ComboListModule,
                     HttpClientModule
                 ],
@@ -2049,7 +2155,6 @@ UploadDialogMoudle.decorators = [
                     FarrisDialogModule,
                     MessagerModule.forRoot(),
                     UploadModule,
-                    ButtonsModule,
                     NotifyModule.forRoot(),
                     HttpClientModule
                 ],
@@ -2078,6 +2183,13 @@ class UploadLimit {
 class GspFormUploadListEntity {
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class GspFormDocInfo {
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2085,6 +2197,13 @@ class GspFormUploadListEntity {
 class GspDocMetaProperty {
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class GspFormUploadEntity {
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc