#939962 by rwohleb, chx, quicksketch: Fixed File field allowed extensions JS broken in Chrome on OS X

2 files changed, 27 insertions, 13 deletions

diff --git a/modules/file/file.js b/modules/file/file.js
index 0f0f43708..15629df5b 100644
--- a/modules/file/file.js
+++ b/modules/file/file.js
@@ -15,11 +15,20 @@
  * Attach behaviors to managed file element upload fields.
  */
 Drupal.behaviors.fileValidateAutoAttach = {
-  attach: function (context) {
-    $('div.form-managed-file input.form-file[accept]', context).bind('change', Drupal.file.validateExtension);
+  attach: function (context, settings) {
+    if (settings.file && settings.file.elements) {
+      $.each(settings.file.elements, function(selector) {
+        var extensions = settings.file.elements[selector];
+        $(selector, context).bind('change', {extensions: extensions}, Drupal.file.validateExtension);
+      });
+    }
   },
-  detach: function (context) {
-    $('div.form-managed-file input.form-file[accept]', context).unbind('change', Drupal.file.validateExtension);
+  detach: function (context, settings) {
+    if (settings.file && settings.file.elements) {
+      $.each(settings.file.elements, function(selector) {
+        $(selector, context).unbind('change', Drupal.file.validateExtension);
+      });
+    }
   }
 };
 
@@ -54,20 +63,20 @@ Drupal.behaviors.filePreviewLinks = {
  */
 Drupal.file = Drupal.file || {
   /**
-   * Client-side file input validation based on the HTML "accept" attribute.
+   * Client-side file input validation of file extensions.
    */
   validateExtension: function (event) {
     // Remove any previous errors.
     $('.file-upload-js-error').remove();
 
-    // Add client side validation for the input[type=file] accept attribute.
-    var accept = this.accept.replace(/,\s*/g, '|');
-    if (accept.length > 1 && this.value.length > 0) {
-      var acceptableMatch = new RegExp('\\.(' + accept + ')$', 'gi');
+    // Add client side validation for the input[type=file].
+    var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
+    if (extensionPattern.length > 1 && this.value.length > 0) {
+      var acceptableMatch = new RegExp('\\.(' + extensionPattern + ')$', 'gi');
       if (!acceptableMatch.test(this.value)) {
         var error = Drupal.t("The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.", {
           '%filename': this.value,
-          '%extensions': accept.replace(/\|/g, ', ')
+          '%extensions': extensionPattern.replace(/\|/g, ', ')
         });
         $(this).parents('div.form-managed-file').prepend('<div class="messages error file-upload-js-error">' + error + '</div>');
         this.value = '';
diff --git a/modules/file/file.module b/modules/file/file.module
index 8b8b9c924..df0d11e34 100644
--- a/modules/file/file.module
+++ b/modules/file/file.module
@@ -442,10 +442,15 @@ function file_managed_file_process($element, &$form_state, $form) {
     );
   }
 
-  // The "accept" attribute is valid XHTML, but not enforced in browsers.
-  // We use it for our own purposes in our JavaScript validation.
+  // Add the extension list to the page as JavaScript settings.
   if (isset($element['#upload_validators']['file_validate_extensions'][0])) {
-    $element['upload']['#attributes']['accept'] = implode(',', array_filter(explode(' ', $element['#upload_validators']['file_validate_extensions'][0])));
+    $extension_list = implode(',', array_filter(explode(' ', $element['#upload_validators']['file_validate_extensions'][0])));
+    $element['upload']['#attached']['js'] = array(
+      array(
+        'type' => 'setting',
+        'data' => array('file' => array('elements' => array('#' . $element['#id'] . '-upload' => $extension_list)))
+      )
+    );
   }
 
   // Prefix and suffix used for AJAX replacement.