+1 vote
by
Explain why after clicking Cancel when opening the file selection dialog box, it is no longer possible to open it again.
5f7c1d7ec0953336360868.jpeg


I open the dialog window by clicking on the svg element whose id = nit-file-input visually it looks like a slice.
5f7c1e3dbba7c753513622.jpeg

<div class="form__add-file-wrapper">
<div class="form__add-file add-file">
<label class="label">
<svg class="icon icon-add-file" id="init-file-input">
<use xlink:href="/local/img/icons/sprite.svg#add-file"></use>
</svg>
</label>

<div class="form__files-wrapper" id="msg_block"></div>
</div>
</div>


After selecting the file I create dynamically the html element file in the method createInputTypeFile The input file tag is created dynamically because otherwise it will not work adding the file, and you can also dynamically create the tag each time you add a new file.
$(document).on('click', '#feedback #init-file-input', function (event) {
obj.inputField = obj.createInputTypeFile(inputFile);
});

The createInputTypeFile method creates an html element field of type file and the click event is emulated in this field
createInputTypeFile: function(inputFileNum) {
console.log('createInputTypeFile');
const feedback = document.querySelector('#feedback');
const input = document.querySelector('#file-input');

if(!feedback.contains(input)){
const input = document.createElement('input');
input.setAttribute('id', 'file-input');
input.setAttribute('type', 'file');
input.setAttribute('name', 'file[]');
input.style = 'display: none';
feedback.appendChild(input);
input.click(); // эмуляция события click
}
}

I can't understand why the file selection window does not reappear if I click Cancel, is the reason here on the JS side or somewhere deeper in the Browser?
by
If you write in JQ, make full use of its syntax.

1 Answer

0 votes
by
A mishmash of jQuery and geese.
You don't delete an instance after you cancel, it's present in the form and here
if(!feedback.contains(input)){
the check does not go through and the intuition is not clicked
...