menu

arrow_back How do I add a button to open the file selection dialog to the Dropzone.js form?

by
1 vote
I have a form for uploading files. I need the file selection window to appear when I click on the plus button, as well as on the area of the form. On the form and on the button there is a class "open-prompt" which allows to open the file selection dialog.

Blank form:
5f8df7843c1f5987373224.png


File form:
5f8df792769b1117158330.png

The problem is that clicking on the button/form brings up two dialog boxes 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();
}
},

1 Answer

by
 
Best answer
0 votes
In my case, the problem was solved by adding pointer-events: to my button styles.

Explanation:
With pointer-events: none, clicking on the button is ignored and goes to the form, which calls the dialog box