diff --git a/core/modules/file/src/Element/ManagedFile.php b/core/modules/file/src/Element/ManagedFile.php
index f465b18..5c9f078 100644
--- a/core/modules/file/src/Element/ManagedFile.php
+++ b/core/modules/file/src/Element/ManagedFile.php
@@ -345,7 +345,7 @@ public static function processManagedFile(&$element, FormStateInterface $form_st
     // Add the extension list to the page as JavaScript settings.
     if (isset($element['#upload_validators']['file_validate_extensions'][0])) {
       $extension_list = implode(',', array_filter(explode(' ', $element['#upload_validators']['file_validate_extensions'][0])));
-      $element['upload']['#attached']['drupalSettings']['file']['elements']['#' . $element['#id']] = $extension_list;
+      $element['upload']['#attached']['drupalSettings']['file']['elements']['#' . $element['#id'] . '-upload'] = $extension_list;
     }
 
     // Let #id point to the file element, so the field label's 'for' corresponds
diff --git a/core/modules/file/tests/src/FunctionalJavascript/ClientValidationTest.php b/core/modules/file/tests/src/FunctionalJavascript/ClientValidationTest.php
new file mode 100644
index 0000000..82ee052
--- /dev/null
+++ b/core/modules/file/tests/src/FunctionalJavascript/ClientValidationTest.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace Drupal\Tests\file\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests the client side JavaScript validation.
+ *
+ * @group file
+ */
+class ClientValidationTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['file', 'node'];
+
+
+  /**
+   * The real path to the test file.
+   *
+   * @var string
+   */
+  protected $file_path;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    $uri = 'public://file.txt';
+    file_unmanaged_save_data('Drupal rocks!', $uri, FILE_EXISTS_REPLACE);
+    $this->file_path = \Drupal::service('file_system')->realpath($uri);
+  }
+
+  /**
+   * Tests the client side validation on file fields.
+   */
+  public function testDisallowedExtensionErrorMessage() {
+    $admin_user = $this->drupalCreateUser([
+      'administer site configuration',
+    ]);
+    $this->drupalLogin($admin_user);
+
+    $this->drupalGet('node/add/article');
+
+    // Test uploading a file with a file extension not allowed.
+    // Try to upload a file with an unallowed extension
+    $file_path = $this->file_path;
+    $session = $this->getSession();
+    $session->executeScript("page.uploadFile('input[name=files[field_image_0]]', $file_path);");
+
+    // Verify that the error message is there.
+    $error_selector = '.file-upload-js-error';
+    $assert = $this->assertSession();
+    $assert->elementExists('css', $error_selector);
+    $assert->elementContains('css', $error_selector, 'The selected file robots.txt cannot be uploaded. Only files with the following extensions are allowed: png, gif, jpg, jpeg.');
+    // Verify that there is only one error message on the page.
+    $condition = "(jQuery('$error_selector').length == 1)";
+    $assert->assertJsCondition($condition);
+  }
+
+}