How can I trigger a file dialogue from a button click in NW.JS?

Question

I would like to use an image as button that opens a file dialogue in NW.JS, how can i do that?

I have this HTML

<button id="open" style="background: none;"><img src="images/open.png" style="width:20px;background:none;"></button></div>
<input style="display:none;" id="fileDialog" type="file" />

And this JS

function chooseFile(name, handleFile) {
    const chooser = document.querySelector(name);
    chooser.onchange = function () {
        for (const f of this.files) {
            console.log(f.name);
            console.log(f.path);
            handleFile(f.name, f.path);
        }
    };
    chooser.click();
}
chooseFile('#fileDialog', function(name, path){ ... /* do something with the file(s) */ });

You could use the "custom file input" approach instead: https://stackoverflow.com/questions/5813344/how-to-customize-input-type-file — yuriy636, Aug 28 '17 at 21:34
This might be usefull: https://www.npmjs.com/package/nw-dialog . It's like nw api for file dialog. — sandcastles, Oct 02 '17 at 17:16

score 0 · Answer 1 · answered Sep 03 '17 at 08:07

Here is complete working example:

<script>
openbtn.addEventListener('click', e => opendlg.click());

opendlg.addEventListener('change', e => {
    let files = e.target.value;
    if (files) {
        e.target.value = ''; // or you will not receive change-event next time on the same files
        files.split(';').forEach(filepath => {
            alert(filepath);
        });
    }

});
</script>

How can I trigger a file dialogue from a button click in NW.JS?

1 Answers1