diff -u b/core/modules/file/file.es6.js b/core/modules/file/file.es6.js --- b/core/modules/file/file.es6.js +++ b/core/modules/file/file.es6.js @@ -62,6 +62,9 @@ * Detaches auto file upload trigger. */ Drupal.behaviors.fileAutoUpload = { + attach(context) { + $(context).find('input[type="file"]').once('auto-file-upload').on('change.autoFileUpload', Drupal.file.triggerUploadButton); + }, detach(context, setting, trigger) { if (trigger === 'unload') { $(context).find('input[type="file"]').removeOnce('auto-file-upload').off('.autoFileUpload'); @@ -83,12 +86,14 @@ attach(context) { const $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.triggerUploadButton); + $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar); }, detach(context) { - const $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.triggerUploadButton); + if (trigger === 'unload') { + const $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); + } }, }; @@ -164,8 +169,7 @@ * The event triggered. For example `change.autoFileUpload`. */ triggerUploadButton(event) { - Drupal.file.progressBar(event); - $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('fileUpload'); + $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown'); }, /** @@ -215,7 +219,7 @@ * The event triggered, most likely a `mousedown` event. */ progressBar(event) { - const $clickedButton = $(event.target).closest('.js-form-managed-file').find('.js-form-submit'); + const $clickedButton = $(this); const $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress'); if ($progressId.length) { const originalName = $progressId.attr('name'); @@ -232,6 +236,7 @@ setTimeout(() => { $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown(); }, 500); + $clickedButton.trigger('fileUpload'); }, /** diff -u b/core/modules/file/file.js b/core/modules/file/file.js --- b/core/modules/file/file.js +++ b/core/modules/file/file.js @@ -36,6 +36,9 @@ }; Drupal.behaviors.fileAutoUpload = { + attach: function attach(context) { + $(context).find('input[type="file"]').once('auto-file-upload').on('change.autoFileUpload', Drupal.file.triggerUploadButton); + }, detach: function detach(context, setting, trigger) { if (trigger === 'unload') { $(context).find('input[type="file"]').removeOnce('auto-file-upload').off('.autoFileUpload'); @@ -47,12 +50,14 @@ attach: function attach(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.triggerUploadButton); + $context.find('.js-form-managed-file .js-form-submit').on('mousedown', Drupal.file.progressBar); }, detach: function detach(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.triggerUploadButton); + if (trigger === 'unload') { + 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); + } } }; @@ -87,8 +92,7 @@ } }, triggerUploadButton: function triggerUploadButton(event) { - Drupal.file.progressBar(event); - $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('fileUpload'); + $(event.target).closest('.js-form-managed-file').find('.js-form-submit').trigger('mousedown'); }, disableFields: function disableFields(event) { var $clickedButton = $(this).findOnce('ajax'); @@ -109,7 +113,7 @@ }, 1000); }, progressBar: function progressBar(event) { - var $clickedButton = $(event.target).closest('.js-form-managed-file').find('.js-form-submit'); + var $clickedButton = $(this); var $progressId = $clickedButton.closest('div.js-form-managed-file').find('input.file-progress'); if ($progressId.length) { var originalName = $progressId.attr('name'); @@ -124,6 +128,7 @@ setTimeout(function () { $clickedButton.closest('div.js-form-managed-file').find('div.ajax-progress-bar').slideDown(); }, 500); + $clickedButton.trigger('fileUpload'); }, openInNewWindow: function openInNewWindow(event) { event.preventDefault(); diff -u b/core/modules/file/src/Element/ManagedFile.php b/core/modules/file/src/Element/ManagedFile.php --- b/core/modules/file/src/Element/ManagedFile.php +++ b/core/modules/file/src/Element/ManagedFile.php @@ -227,6 +227,8 @@ ], ], 'wrapper' => $ajax_wrapper_id, + // Set a custom submit event so we can modify the upload progress + // identifier element before the form gets submitted. 'event' => 'fileUpload', 'effect' => 'fade', 'progress' => [ @@ -240,6 +242,7 @@ '#name' => $parents_prefix . '_upload_button', '#type' => 'submit', '#value' => t('Upload'), + '#attributes' => ['class' => ['js-hide']], '#validate' => [], '#submit' => ['file_managed_file_submit'], '#limit_validation_errors' => [$element['#parents']],