Because of what, after pressing the Cancel button of the file selection window, this window can no longer be called up again?

  • 0
    Explain why after clicking the Cancel button when opening the file selection dialog box, the dialog box can no longer be called up.


    The dialog box opens by clicking on the svg element whose id = nit-file-input visually looks like a clip.


    <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 dynamically create an html file element in the createInputTypeFile method The input file tag is created dynamically, otherwise file addition will not work, you can also dynamically create a tag every time a new file is added.
    $(document).on('click', '#feedback #init-file-input', function (event) {
                obj.inputField = obj.createInputTypeFile(inputFile);
     });

    The createInputTypeFile method creates an html-element of the file type field in it and this field emulates the click event
    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 appear again if I click the Cancel button, is the reason on the JS side or somewhere deeper in the Browser?
    JavaScript Annabelle Mendoza, Nov 8, 2020

  • 1 Answers
  • 0
    A hodgepodge of giQvery and gies.

    You don't delete the input after canceling, it is present in the form and here

    if (! feedback.contains (input)) {

    check fails and input does not click
    Anonymous

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