Issue #2473943 by Manjit.Singh, Cottser, mu5a5hi, LewisNyman, mortendk, rteijeiro, rachel_norfolk: Prefix form-file and form-managed-file classes with js-

core/lib/Drupal/Core/Render/Element/File.php

@@ -65,7 +65,7 @@ class File extends FormElement {
   public static function preRenderFile($element) {
     $element['#attributes']['type'] = 'file';
     Element::setAttributes($element, array('id', 'name', 'size'));
-    static::setAttributes($element, array('form-file'));
+    static::setAttributes($element, array('js-form-file', 'form-file'));
 
     return $element;
   }

core/modules/file/file.field.inc

@@ -27,8 +27,8 @@ function template_preprocess_file_widget(&$variables) {
     $element['file_' . $file->id()]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
   }
   $variables['element'] = $element;
-  // The "form-managed-file" class is required for proper Ajax functionality.
+  // The "js-form-managed-file" class is required for proper Ajax functionality.
-  $variables['attributes'] = array('class' => array('file-widget', 'form-managed-file', 'clearfix'));
+  $variables['attributes'] = array('class' => array('file-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix'));
 }
 
 /**

core/modules/file/file.js

@@ -74,12 +74,12 @@
     attach: function (context) {
       var $context = $(context);
       $context.find('.js-form-submit').on('mousedown', Drupal.file.disableFields);
-      $context.find('.form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar);
+      $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar);
     },
     detach: function (context) {
       var $context = $(context);
       $context.find('.js-form-submit').off('mousedown', Drupal.file.disableFields);
-      $context.find('.form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar);
+      $context.find('.js-form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar);
     }
   };
 
@@ -90,10 +90,10 @@
    */
   Drupal.behaviors.filePreviewLinks = {
     attach: function (context) {
-      $(context).find('div.form-managed-file .file a, .file-widget .file a').on('click', Drupal.file.openInNewWindow);
+      $(context).find('div.js-form-managed-file .file a, .file-widget .file a').on('click', Drupal.file.openInNewWindow);
     },
     detach: function (context) {
-      $(context).find('div.form-managed-file .file a, .file-widget .file a').off('click', Drupal.file.openInNewWindow);
+      $(context).find('div.js-form-managed-file .file a, .file-widget .file a').off('click', Drupal.file.openInNewWindow);
     }
   };
 
@@ -132,7 +132,7 @@
             '%filename': this.value.replace('C:\\fakepath\\', ''),
             '%extensions': extensionPattern.replace(/\|/g, ', ')
           });
-          $(this).closest('div.form-managed-file').prepend('<div class="messages messages--error file-upload-js-error" aria-live="polite">' + error + '</div>');
+          $(this).closest('div.js-form-managed-file').prepend('<div class="messages messages--error file-upload-js-error" aria-live="polite">' + error + '</div>');
           this.value = '';
           // Cancel all other change event handlers.
           event.stopImmediatePropagation();
@@ -148,7 +148,7 @@
      * @param {jQuery.Event} event
      */
     triggerUploadButton: function (event) {
-      $(event.target).closest('.form-managed-file').find('.js-form-submit').trigger('mousedown');
+      $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown');
     },
 
     /**
@@ -168,8 +168,8 @@
 
       // Check if we're working with an "Upload" button.
       var $enabledFields = [];
-      if ($clickedButton.closest('div.form-managed-file').length > 0) {
+      if ($clickedButton.closest('div.js-form-managed-file').length > 0) {
-        $enabledFields = $clickedButton.closest('div.form-managed-file').find('input.form-file');
+        $enabledFields = $clickedButton.closest('div.js-form-managed-file').find('input.js-form-file');
       }
 
       // Temporarily disable upload fields other than the one we're currently
@@ -181,7 +181,7 @@
       // functions are called, so we don't have to worry about the fields being
       // re-enabled too soon. @todo If the previous sentence is true, why not
       // set the timeout to 0?
-      var $fieldsToTemporarilyDisable = $('div.form-managed-file input.form-file').not($enabledFields).not(':disabled');
+      var $fieldsToTemporarilyDisable = $('div.js-form-managed-file input.js-form-file').not($enabledFields).not(':disabled');
       $fieldsToTemporarilyDisable.prop('disabled', true);
       setTimeout(function () {
         $fieldsToTemporarilyDisable.prop('disabled', false);
@@ -197,7 +197,7 @@
      */
     progressBar: function (event) {
       var $clickedButton = $(this);
-      var $progressId = $clickedButton.closest('div.form-managed-file').find('input.file-progress');
+      var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress');
       if ($progressId.length) {
         var originalName = $progressId.attr('name');
 
@@ -211,7 +211,7 @@
       }
       // Show the progress bar if the upload takes longer than half a second.
       setTimeout(function () {
-        $clickedButton.closest('div.form-managed-file').find('div.ajax-progress-bar').slideDown();
+        $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown();
       }, 500);
     },
 

core/modules/file/templates/file-managed-file.html.twig

@@ -12,6 +12,12 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes.addClass('form-managed-file') }}>
+{%
+  set classes = [
+    'js-form-managed-file',
+    'form-managed-file',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {{ element }}
 </div>

core/modules/image/image.field.inc

@@ -21,7 +21,7 @@ use Drupal\Core\Render\Element;
 function template_preprocess_image_widget(&$variables) {
   $element = $variables['element'];
 
-  $variables['attributes'] = array('class' => array('image-widget', 'form-managed-file', 'clearfix'));
+  $variables['attributes'] = array('class' => array('image-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix'));
 
   if (!empty($element['fids']['#value'])) {
     $file = reset($element['#files']);

core/modules/image/src/Tests/ImageFieldDisplayTest.php

@@ -317,8 +317,8 @@ class ImageFieldDisplayTest extends ImageFieldTestBase {
       'files[' . $field_name . '_2][]' => drupal_realpath($test_image->uri),
     );
     $this->drupalPostAjaxForm(NULL, $edit, $field_name . '_2_upload_button');
-    $this->assertNoRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-2-upload" name="files[' . $field_name . '_2][]" size="22" class="form-file">');
+    $this->assertNoRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-2-upload" name="files[' . $field_name . '_2][]" size="22" class="js-form-file form-file">');
-    $this->assertRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-3-upload" name="files[' . $field_name . '_3][]" size="22" class="form-file">');
+    $this->assertRaw('<input multiple type="file" id="edit-' . strtr($field_name, '_', '-') . '-3-upload" name="files[' . $field_name . '_3][]" size="22" class="js-form-file form-file">');
   }
 
   /**

core/themes/classy/templates/content-edit/file-managed-file.html.twig

@@ -10,6 +10,12 @@
  * @see template_preprocess_file_managed_file()
  */
 #}
-<div{{ attributes.addClass('form-managed-file') }}>
+{%
+  set classes = [
+    'js-form-managed-file',
+    'form-managed-file',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {{ element }}
 </div>