How to nest a button to open a file selection dialog in a Dropzone.js form?

  • 0
    I have a file upload form. It is necessary that when you click on the plus button, as well as on the form area, a file selection window appears. On the form and on the button there is an "open-prompt" class that allows you to open a file selection dialog.

    Empty form:


    Form with file:


    The problem is that when you click on a button / form, two dialog boxes are called up at once

    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();
        }
      },
    JavaScript Lila Meyer, Jan 3, 2019

  • 1 Answers
  • 0
    In my case, the problem was solved by adding pointer-events: none to the styles of my button.



    Explanation:

    With pointer-events: none, the click on the button is ignored and goes to the form that invokes the dialog
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!