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?
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" />