Как вложить кнопку для открытия диалога выбора файлов в форму Dropzone.js?

Question

[Евгений Пятков]

У меня есть форма загрузки файлов. Нужно чтобы при нажатии на кнопку с плюсом, а также на область формы появлялось окно выбора файлов. На форме и на кнопку весит класс "open-prompt", который позволяет открыть диалог выбора файлов.

Пустая форма:


Форма с файлом:


Проблема заключается в том, что при клике на кнопку/форму вызываются сразу два диалоговых окна

HTML:

<div
				id="file-upload"
				action="/upload"
				class="open-prompt dropzone feedback-modal__upload"
			>
				<div class="dz-message" data-dz-message>
					<div class="upload__text">
						<p class="upload__text-top">Выберите фотографии</p>
						<p class="upload__text-bottom">
							или перетащите их в пунктирную область PNG, JPEG до 10 МБ
						</p>
					</div>
				</div>
				<button class="upload__button_type_add-more">
					<svg
						width="34"
						height="34"
						viewBox="0 0 34 34"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M17 7.08334V26.9167"
							stroke="black"
							stroke-width="1.2"
							stroke-linejoin="round"
						/>
						<path
							d="M7.0835 17H26.9168"
							stroke="black"
							stroke-width="1.2"
							stroke-linejoin="round"
						/>
					</svg>
				</button>
			</div>

JavaScript:

Dropzone.options.fileUpload = {
  paramName: 'image',
  maxFilesize: 10,
  maxFiles: 10,
  clickable: '.open-prompt',
  accept: function (file, done) {
    if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
      done('Разрешенные форматы файлов: PNG, JPEG')
    } else {
      done();
    }
  },

Answer 1

[Евгений Пятков]

В моем случае проблему удалось решить добавлением pointer-events: none к стилям моей кнопки.

Пояснение:
С pointer-events: none клик по кнопке игнорируется и переходит на форму, которая вызывает диалоговое окно