diff --git a/core/modules/file/file.js b/core/modules/file/file.js index 8ed377e..f825d10 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,13 @@ 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); + $context.find('.js-form-submit').on('mousedown.fileButtons', Drupal.file.disableFields); + $context.find('.js-form-managed-file .js-form-submit').on('mousedown.fileButtons', Drupal.file.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 +170,11 @@ * The event triggered. For example `change.autoFileUpload`. */ triggerUploadButton: function (event) { - $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown'); + // Calling event handlers before the form is submitted. + // Triggering mousedown on submit button may start an asynchronous upload thread. + $(event.target).closest('.js-form-managed-file').find('.js-form-submit') + .trigger('mousedown.fileButtons') + .trigger('mousedown'); }, /** @@ -181,7 +185,7 @@ * @param {jQuery.Event} event * The event triggered, most likely a `mousedown` event. */ - disableFields: function (event) { + disableFields: debounce(function (event) { var $clickedButton = $(this).findOnce('ajax'); // Only disable upload fields for Ajax buttons. @@ -209,7 +213,7 @@ setTimeout(function () { $fieldsToTemporarilyDisable.prop('disabled', false); }, 1000); - }, + }, 100, true), /** * Add progress bar support if possible. @@ -219,7 +223,7 @@ * @param {jQuery.Event} event * The event triggered, most likely a `mousedown` event. */ - progressBar: function (event) { + progressBar: debounce(function (event) { var $clickedButton = $(this); var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress'); if ($progressId.length) { @@ -237,7 +241,7 @@ setTimeout(function () { $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown(); }, 500); - }, + }, 100, true), /** * Open links to files within forms in a new window. @@ -254,4 +258,4 @@ } }; -})(jQuery, Drupal); +})(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