[Maps][File upload] File upload default index name timing and error improvements (#47173)

* Prevent issue of index name is wiped out when previous file cancelled

* Check name and type before parsing for file validity. Use human readable sizes for error messages

* It's just an easy win to always lowercase the name for a valid index name default

* i18n updates

x-pack/legacy/plugins/file_upload/public/components/json_index_file_picker.js

@@ -39,13 +39,28 @@ export class JsonIndexFilePicker extends Component {
       return;
     }
     const file = fileArr[0];
-    let initIndexName;
+
+    this._parseFile(file);
+  };
+
+  _checkFileSize = ({ size }) => {
+    const fileSizeValid = true;
     try {
-      initIndexName = this._getIndexName(file);
+      if (size > MAX_FILE_SIZE) {
+        const humanReadableSize = bytesToSize(size);
+        const humanReadableMaxSize = bytesToSize(MAX_FILE_SIZE);
+        throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.acceptableFileSize', {
+          defaultMessage: 'File size {fileSize} exceeds max file size of {maxFileSize}',
+          values: {
+            fileSize: humanReadableSize,
+            maxFileSize: humanReadableMaxSize
+          }
+        }));
+      }
     } catch (error) {
       this.setState({
-        fileUploadError: i18n.translate('xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName', {
-          defaultMessage: 'Error retrieving index name: {errorMessage}',
+        fileUploadError: i18n.translate('xpack.fileUpload.jsonIndexFilePicker.fileSizeError', {
+          defaultMessage: 'File size error: {errorMessage}',
           values: {
             errorMessage: error.message
           }
@@ -53,46 +68,56 @@ export class JsonIndexFilePicker extends Component {
       });
       return;
     }
+    return fileSizeValid;
+  }
 
-    this.props.setIndexName(initIndexName);
-    this._parseFile(file);
-  };
+  _getFileNameAndCheckType({ name }) {
+    let fileNameOnly;
+    try {
+      if (!name) {
+        throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.noFileNameError', {
+          defaultMessage: 'No file name provided'
+        }));
+      }
 
-  _getIndexName({ name, size }) {
-    if (!name) {
-      throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.noFileNameError', {
-        defaultMessage: 'No file name provided'
-      }));
+      const splitNameArr = name.split('.');
+      const fileType = splitNameArr.pop();
+      if (!ACCEPTABLE_FILETYPES.includes(fileType)) {
+        throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.acceptableTypesError', {
+          defaultMessage: 'File is not one of acceptable types: {types}',
+          values: {
+            types: ACCEPTABLE_FILETYPES.join(', ')
+          }
+        }));
+      }
+
+      fileNameOnly = splitNameArr[0];
+    } catch (error) {
+      this.setState({
+        fileUploadError: i18n.translate('xpack.fileUpload.jsonIndexFilePicker.fileProcessingError', {
+          defaultMessage: 'File processing error: {errorMessage}',
+          values: {
+            errorMessage: error.message
+          }
+        })
+      });
+      return;
     }
-
-    const splitNameArr = name.split('.');
-    const fileType = splitNameArr.pop();
-    if (!ACCEPTABLE_FILETYPES.includes(fileType)) {
-      throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.acceptableTypesError', {
-        defaultMessage: 'File is not one of acceptable types: {types}',
-        values: {
-          types: ACCEPTABLE_FILETYPES.join(', ')
-        }
-      }));
-    }
-
-    if (size > MAX_FILE_SIZE) {
-      throw new Error(i18n.translate('xpack.fileUpload.jsonIndexFilePicker.acceptableFileSize', {
-        defaultMessage: 'File size {fileSize} bytes exceeds max file size of {maxFileSize}',
-        values: {
-          fileSize: size,
-          maxFileSize: MAX_FILE_SIZE
-        }
-      }));
-    }
-
-    return splitNameArr[0];
+    return fileNameOnly.toLowerCase();
   }
 
   async _parseFile(file) {
     const {
-      setFileRef, setParsedFile, resetFileAndIndexSettings, onFileUpload, transformDetails
+      setFileRef, setParsedFile, resetFileAndIndexSettings, onFileUpload,
+      transformDetails, setIndexName
     } = this.props;
+
+    const fileSizeValid = this._checkFileSize(file);
+    const defaultIndexName = this._getFileNameAndCheckType(file);
+    if (!fileSizeValid || !defaultIndexName) {
+      resetFileAndIndexSettings();
+      return;
+    }
     // Parse file
     this.setState({ fileParsingProgress: i18n.translate(
       'xpack.fileUpload.jsonIndexFilePicker.parsingFile',
@@ -123,10 +148,14 @@ export class JsonIndexFilePicker extends Component {
       resetFileAndIndexSettings();
       return;
     }
+
+    setIndexName(defaultIndexName);
     setFileRef(file);
     setParsedFile(parsedFileResult);
   }
 
+
+
   render() {
     const { fileParsingProgress, fileUploadError } = this.state;
 

x-pack/plugins/translations/translations/ja-JP.json

@@ -11385,7 +11385,6 @@
     "xpack.advancedUiActions.customizeTimeRange.modal.headerTitle": "パネルの時間範囲のカスタマイズ",
     "xpack.advancedUiActions.customizeTimeRangeMenuItem.displayName": "時間範囲のカスタマイズ",
     "xpack.fileUpload.fileParser.errorReadingFile": "ファイルの読み込み中にエラーが発生しました",
-    "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません",
-    "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "インデックス名の取得中にエラーが発生: {errorMessage}"
+    "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません"
   }
 }

x-pack/plugins/translations/translations/zh-CN.json

@@ -11387,7 +11387,6 @@
     "xpack.advancedUiActions.customizeTimeRange.modal.headerTitle": "定制面板时间范围",
     "xpack.advancedUiActions.customizeTimeRangeMenuItem.displayName": "定制时间范围",
     "xpack.fileUpload.fileParser.errorReadingFile": "读取文件时出错",
-    "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件",
-    "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "检索索引名称时出错：{errorMessage}"
+    "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件"
   }
 }