[File upload] Enforce file-type check in file dialog (#55063)

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

@@ -13,6 +13,8 @@ import { MAX_FILE_SIZE } from '../../common/constants/file_import';
 import _ from 'lodash';
 
 const ACCEPTABLE_FILETYPES = ['json', 'geojson'];
+const acceptedFileTypeString = ACCEPTABLE_FILETYPES.map(type => `.${type}`).join(',');
+const acceptedFileTypeStringMessage = ACCEPTABLE_FILETYPES.map(type => `.${type}`).join(', ');
 
 export class JsonIndexFilePicker extends Component {
   state = {
@@ -103,6 +105,7 @@ export class JsonIndexFilePicker extends Component {
       const splitNameArr = name.split('.');
       const fileType = splitNameArr.pop();
       if (!ACCEPTABLE_FILETYPES.includes(fileType)) {
+        //should only occur if browser does not accept the <File> accept parameter
         throw new Error(
           i18n.translate('xpack.fileUpload.jsonIndexFilePicker.acceptableTypesError', {
             defaultMessage: 'File is not one of acceptable types: {types}',
@@ -252,7 +255,10 @@ export class JsonIndexFilePicker extends Component {
             ) : (
               <span>
                 {i18n.translate('xpack.fileUpload.jsonIndexFilePicker.formatsAccepted', {
-                  defaultMessage: 'Formats accepted: .json, .geojson',
+                  defaultMessage: 'Formats accepted: {acceptedFileTypeStringMessage}',
+                  values: {
+                    acceptedFileTypeStringMessage,
+                  },
                 })}{' '}
                 <br />
                 <FormattedMessage
@@ -274,6 +280,7 @@ export class JsonIndexFilePicker extends Component {
               />
             }
             onChange={this._fileHandler}
+            accept={acceptedFileTypeString}
           />
         </EuiFormRow>
       </Fragment>

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

@@ -5668,7 +5668,6 @@
     "xpack.fileUpload.jsonIndexFilePicker.filePickerLabel": "アップロードするファイルを選択",
     "xpack.fileUpload.jsonIndexFilePicker.fileProcessingError": "ファイル処理エラー: {errorMessage}",
     "xpack.fileUpload.jsonIndexFilePicker.fileSizeError": "ファイルサイズエラー: {errorMessage}",
-    "xpack.fileUpload.jsonIndexFilePicker.formatsAccepted": "許可されている形式：.json、.geojson",
     "xpack.fileUpload.jsonIndexFilePicker.maxSize": "最大サイズ：{maxFileSize}",
     "xpack.fileUpload.jsonIndexFilePicker.noFileNameError": "ファイル名が指定されていません",
     "xpack.fileUpload.jsonIndexFilePicker.parsingFile": "{featuresProcessed} 件の機能が解析されました…",

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

@@ -5667,7 +5667,6 @@
     "xpack.fileUpload.jsonIndexFilePicker.filePickerLabel": "选择文件进行上传",
     "xpack.fileUpload.jsonIndexFilePicker.fileProcessingError": "文件处理错误：{errorMessage}",
     "xpack.fileUpload.jsonIndexFilePicker.fileSizeError": "文件大小错误：{errorMessage}",
-    "xpack.fileUpload.jsonIndexFilePicker.formatsAccepted": "接受的格式：.json、.geojson",
     "xpack.fileUpload.jsonIndexFilePicker.maxSize": "最大大小：{maxFileSize}",
     "xpack.fileUpload.jsonIndexFilePicker.noFileNameError": "未提供任何文件名称",
     "xpack.fileUpload.jsonIndexFilePicker.parsingFile": "{featuresProcessed} 特征已解析......",