[EuiFilePicker] Fix missing i18n for prompt text, improve filesSelected i18n

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fixed bug in `euiHeaderAffordForFixed` mixin that was not accounting for situations where `EuiDataGrid` was in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054))
 - Fixed `z-index` styles that were causing `EuiModal` and `EuiFlyout` components to appear behind `EuiDataGrid` when in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054))
 - Fixed untranslated i18n strings for `EuiFilterButton` - adds 2 new tokens and removes old `euiFilterButton.filterBadge` token ([#4750](https://github.com/elastic/eui/pull/5061))
+- Fixed missing i18n token `EuiFilePicker`'s default prompt, and improved i18n string for `euiFilePicker.filesSelected` ([#5063](https://github.com/elastic/eui/pull/5063))
 
 **Theme: Amsterdam**
 

src/components/form/file_picker/file_picker.tsx

@@ -60,7 +60,12 @@ export interface EuiFilePickerProps
 
 export class EuiFilePicker extends Component<EuiFilePickerProps> {
   static defaultProps = {
-    initialPromptText: 'Select or drag and drop a file',
+    initialPromptText: (
+      <EuiI18n
+        token="euiFilePicker.promptText"
+        default="Select or drag and drop a file"
+      />
+    ),
     compressed: false,
     display: 'large',
   };
@@ -72,12 +77,18 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
 
   fileInput: HTMLInputElement | null = null;
 
-  handleChange = (filesSelected?: string | null) => {
+  handleChange = () => {
     if (!this.fileInput) return;
 
     if (this.fileInput.files && this.fileInput.files.length > 1) {
       this.setState({
-        promptText: `${this.fileInput.files.length} ${filesSelected}`,
+        promptText: (
+          <EuiI18n
+            token="euiFilePicker.filesSelected"
+            default="{fileCount} files selected"
+            values={{ fileCount: this.fileInput.files.length }}
+          />
+        ),
       });
     } else if (this.fileInput.files && this.fileInput.files.length === 0) {
       this.setState({ promptText: null });
@@ -101,7 +112,7 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
     if (!this.fileInput) return;
 
     this.fileInput.value = '';
-    this.handleChange(null);
+    this.handleChange();
   };
 
   showDrop = () => {
@@ -117,13 +128,10 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
   render() {
     return (
       <EuiI18n
-        tokens={[
-          'euiFilePicker.clearSelectedFiles',
-          'euiFilePicker.filesSelected',
-        ]}
-        defaults={['Clear selected files', 'files selected']}
+        token="euiFilePicker.clearSelectedFiles"
+        default="Clear selected files"
       >
-        {([clearSelectedFiles, filesSelected]: string[]) => {
+        {(clearSelectedFiles: string) => {
           const {
             id,
             name,
@@ -213,7 +221,7 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                     id={id}
                     name={name}
                     className="euiFilePicker__input"
-                    onChange={() => this.handleChange(filesSelected)}
+                    onChange={this.handleChange}
                     ref={(input) => {
                       this.fileInput = input;
                     }}