Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select file on fs with react and electron?

I'm building a desktop application with Electron and ReactJS.

I need to implement a feature to select a file from the file system, like how input="file" works in forms. Actually, all I need is to obtain the absolute path of the file.

How can I achieve that?

I tried:

<input type="file" onChange={function(e) {console.log(e.target.value)} } />

But it returns fake path due to security reasons.
I think dialogs in Electron may be useful for this purpose, but how can I propagate the file path to my react application then?

like image 722
fbjorn Avatar asked Dec 01 '25 04:12

fbjorn


1 Answers

    const {dialog} = require('electron').remote;

...

document.querySelector('#fileSelect').addEventListener('click', function (event) {
    dialog.showOpenDialog({
        properties: ['openFile', 'multiSelections']
    }, function (files) {
        if (files !== undefined) {
            // handle files
        }            
    })
});
like image 78
KBIIX Avatar answered Dec 02 '25 18:12

KBIIX



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!