diff --git a/js/dropzone.integration.js b/js/dropzone.integration.js index 2d53f1d..05666a4 100644 --- a/js/dropzone.integration.js +++ b/js/dropzone.integration.js @@ -111,6 +111,29 @@ dropzoneInstance.removeFile(rejectedFiles[i]); } }); + + // Auto disble/enable form buttons. + if (instanceConfig.disableFormButtons) { + var $form = selector.parents('form'); + var $buttons = $form.find(instanceConfig.disableFormButtons); + + if ($buttons.length > 0) { + // If a file is added to the queue, disable the buttons. + dropzoneInstance.on('addedfile', function () { + $buttons.prop('disabled', true); + }); + + // If a file is removed from the queue, toggle the buttons depending on the length of the queue. + dropzoneInstance.on('removedfile', function () { + $buttons.prop('disabled', dropzoneInstance.getQueuedFiles().length > 0); + }); + + // If all files have finished uploading, re-enable the buttons. + dropzoneInstance.on('queuecomplete', function () { + $buttons.prop('disabled', false); + }); + } + } }); } }; diff --git a/src/Element/DropzoneJs.php b/src/Element/DropzoneJs.php index 2884734..6778ef8 100644 --- a/src/Element/DropzoneJs.php +++ b/src/Element/DropzoneJs.php @@ -34,6 +34,8 @@ use Drupal\Core\Url; * - #clientside_resize (bool) * Whether or not to use DropzoneJS clientside resizing. It requires v4.4.0+ * version of the library. + * - #disable_form_buttons (string) + * A CSS selector of buttons to disable until the queued files are uploaded. * * Optional options are: * - #resize_width (integer) @@ -158,6 +160,12 @@ class DropzoneJs extends FormElement { $element['#attached']['library'][] = 'dropzonejs/widget'; + if (!empty($element['#disable_form_buttons'])) { + $element['#attached']['drupalSettings']['dropzonejs']['instances'][$element['#id']] += [ + 'disableFormButtons' => $element['#disable_form_buttons'], + ]; + } + static::setAttributes($element, ['dropzone-enable']); return $element; }