How to get input value if it is not in html

Question

Inside the code, I create an input element with the file type. I don't add it to the tree. I want to get the value of this input after the user adds it to the file. There is one, but I do not need to add this input to the HTML template.

                    <p-splitButton
                        label="Add document"
                        icon="pi pi-plus"
                        (onClick)="openAddDocument()"
                        [model]="addDocumentButtonMenuItems"
                        styleClass="p-button-help"
                    ></p-splitButton>

public readonly addDocumentButtonMenuItems = [
    {
        label: 'Dowload document', icon: 'pi pi-upload', command: () => {
            this.uploadFile();
        },
    },
];

public uploadFile(): void {
        const input = document.createElement('input');
        input.type = 'file';
        input.click();
    }

How to get value input?

unfortunately i don't understand the question. Can you please show me your html of what you have done? — Maik Lowrey, Dec 22 '21 at 12:13

jeremy-denis · Answer 1 · 2021-12-22T13:40:52.540

to get file value of an input file you can use myinput.files[0];after a change event on input

but be careful in modern browser you can't open file dialog from script without a user action (click for sample)

js:14 File chooser dialog can only be shown with a user activation.

in the following link you will found a solution to open a file dialog with native js How to open a file / browse dialog using javascript?

you can bind onChange event of input file to get the chosen file

var fileInput = document.getElementById('theFile');
       fileInput.addEventListener('change', function() {
        var selectedFile = document.getElementById('theFile').files[0];
        console.log(selectedFile.name);
       });

function performClick(elemId) {
       var elem = document.getElementById(elemId);
       if(elem && document.createEvent) {
          var evt = document.createEvent("MouseEvents");
          evt.initEvent("click", true, false);
          elem.dispatchEvent(evt);
       }
    }
    
   var fileInput = document.getElementById('theFile');
   fileInput.addEventListener('change', function() {
    var selectedFile = document.getElementById('theFile').files[0];
    console.log(selectedFile.name);
   });

    <a href="#" onclick="performClick('theFile');">Open file dialog</a>
    <input type="file" id="theFile" />

How to get input value if it is not in html

1 Answers1