diff --git a/core/modules/file/file.js b/core/modules/file/file.js index 8ed377e..bfdb85e 100644 --- a/core/modules/file/file.js +++ b/core/modules/file/file.js @@ -7,7 +7,7 @@ * prevents separate file fields from accidentally uploading files). */ -(function ($, Drupal) { +(function ($, Drupal, debounce) { 'use strict'; @@ -88,13 +88,15 @@ Drupal.behaviors.fileButtons = { attach: function (context) { var $context = $(context); - $context.find('.js-form-submit').on('mousedown', Drupal.file.disableFields); - $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar); + var $submit = $context.find('.js-form-submit'); + $submit.on('mousedown.fileButtons', Drupal.fileHandlerDebounce.disableFields); + var $managedFileSubmit = $context.find('.js-form-managed-file .js-form-submit'); + $managedFileSubmit.on('mousedown.fileButtons', Drupal.fileHandlerDebounce.progressBar); }, detach: function (context) { var $context = $(context); - $context.find('.js-form-submit').off('mousedown', Drupal.file.disableFields); - $context.find('.js-form-managed-file .js-form-submit').off('mousedown', Drupal.file.progressBar); + $context.find('.js-form-submit').off('mousedown.fileButtons'); + $context.find('.js-form-managed-file .js-form-submit').off('mousedown.fileButtons'); } }; @@ -170,7 +172,14 @@ * The event triggered. For example `change.autoFileUpload`. */ triggerUploadButton: function (event) { - $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown'); + var $submit = $(event.target).closest('.js-form-managed-file').find('.js-form-submit'); + if ($submit.length) { + // Calling event handlers immediately. + Drupal.fileHandlerDebounce.disableFields.apply($submit[0], [event]); + Drupal.fileHandlerDebounce.progressBar.apply($submit[0], [event]); + // Triggering mousedown on submit button may start an asynchronous upload thread. + } + $submit.trigger('mousedown'); }, /** @@ -254,4 +263,30 @@ } }; -})(jQuery, Drupal); + /** + * Helper class to debounde event handlers in Drupal.file. + */ + Drupal.fileHandlerDebounce = Drupal.fileHandlerDebounce || { + + /** + * Debounced version of Drupal.file.disableFields(). + * + * @name Drupal.fileHandlerDebounce.disableFields + * + * @param {jQuery.Event} event + * The event triggered, most likely a `mousedown` event. + */ + disableFields: debounce(Drupal.file.disableFields, 100, true), + + /** + * Debounced version of Drupal.file.progressBar(). + * + * @name Drupal.fileHandlerDebounce.progressBar + * + * @param {jQuery.Event} event + * The event triggered, most likely a `mousedown` event. + */ + progressBar: debounce(Drupal.file.progressBar, 100, true) + }; + +})(jQuery, Drupal, Drupal.debounce); diff --git a/core/modules/file/file.libraries.yml b/core/modules/file/file.libraries.yml index ccc0c3b..659de14 100644 --- a/core/modules/file/file.libraries.yml +++ b/core/modules/file/file.libraries.yml @@ -10,3 +10,4 @@ - core/jquery.once - core/drupal - core/drupalSettings + - core/drupal.debounce