Question

I am adding file import functionality to an existing page.

I want to do this using javascript and without modifying the page, ie. without adding the “input type=”file” ” tag, everyone seems to be talking about.

I have added the button, now I want the event to show the file dialog, user to browse for file and javascript to submit file to server for validation.

How do I do that?
Btw, main priority is opening file dialog, so no need for user or submitting part, if you don’t know it.

Thx

Answer 1

Well, if I understand correct what you want, is some like this…

<input type="button" value="Add File" onclick="document.getElementById('file').click()" />
<input type="file" id="file" style="display:none" />

Hidding the file object and calling the file dialog with another object. Right ?

EDIT: Only Javascript

myClickHandler() {
    var f = document.createElement('input');
    f.style.display='none';
    f.type='file';
    f.name='file';
    document.getElementById('yourformhere').appendChild(f);
    f.click();
}

button.onclick = myClickHandler

Put this in your object with the id of your form in place of yourformhere !!