Open file dialog from React Component using Electron
So I'm aware without react on the render thread I can do this to open a file dialog.
const {dialog} = require('electron').remote
dialog.showOpenDialog({properties: ['openFile']}))
I'm trying to use react and learn the workflows of React & Electron though. Doing the require gives me the following error.
TypeError: fs.existsSync is not a function
getElectronPath
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
View compiled
(anonymous function)
18 | }
19 | }
20 |
> 21 | module.exports = getElectronPath();
View compiled
Unsure what I can do to make this work. Should be a pretty simple canvas drawing app, but i do need to enumerate images in folders & give file dialog capabilities to the app. Any ideas how to remedy this issue?
reactjs electron
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
add a comment |
So I'm aware without react on the render thread I can do this to open a file dialog.
const {dialog} = require('electron').remote
dialog.showOpenDialog({properties: ['openFile']}))
I'm trying to use react and learn the workflows of React & Electron though. Doing the require gives me the following error.
TypeError: fs.existsSync is not a function
getElectronPath
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
View compiled
(anonymous function)
18 | }
19 | }
20 |
> 21 | module.exports = getElectronPath();
View compiled
Unsure what I can do to make this work. Should be a pretty simple canvas drawing app, but i do need to enumerate images in folders & give file dialog capabilities to the app. Any ideas how to remedy this issue?
reactjs electron
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07
add a comment |
So I'm aware without react on the render thread I can do this to open a file dialog.
const {dialog} = require('electron').remote
dialog.showOpenDialog({properties: ['openFile']}))
I'm trying to use react and learn the workflows of React & Electron though. Doing the require gives me the following error.
TypeError: fs.existsSync is not a function
getElectronPath
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
View compiled
(anonymous function)
18 | }
19 | }
20 |
> 21 | module.exports = getElectronPath();
View compiled
Unsure what I can do to make this work. Should be a pretty simple canvas drawing app, but i do need to enumerate images in folders & give file dialog capabilities to the app. Any ideas how to remedy this issue?
reactjs electron
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
So I'm aware without react on the render thread I can do this to open a file dialog.
const {dialog} = require('electron').remote
dialog.showOpenDialog({properties: ['openFile']}))
I'm trying to use react and learn the workflows of React & Electron though. Doing the require gives me the following error.
TypeError: fs.existsSync is not a function
getElectronPath
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
View compiled
(anonymous function)
18 | }
19 | }
20 |
> 21 | module.exports = getElectronPath();
View compiled
Unsure what I can do to make this work. Should be a pretty simple canvas drawing app, but i do need to enumerate images in folders & give file dialog capabilities to the app. Any ideas how to remedy this issue?
reactjs electron
reactjs electron
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
asked Nov 22 '18 at 8:04
user2927848user2927848
643318
643318
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07
add a comment |
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07
add a comment |
1 Answer
1
active
oldest
votes
I found a solution. You can run a preload.js into a window on creation and then call the items like javascript objects.
Found this issue on the github
https://github.com/electron/electron/issues/9920
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
Preload.js
const { dialog } = require('electron').remote.dialog;
window.electron = {};
window.electron.dialog = dialog;
Then anything I want to load into the window I can just add to the window.electron object and call it with no issues. React pre-compiler is more the issue than anything with electron.
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426331%2fopen-file-dialog-from-react-component-using-electron%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I found a solution. You can run a preload.js into a window on creation and then call the items like javascript objects.
Found this issue on the github
https://github.com/electron/electron/issues/9920
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
Preload.js
const { dialog } = require('electron').remote.dialog;
window.electron = {};
window.electron.dialog = dialog;
Then anything I want to load into the window I can just add to the window.electron object and call it with no issues. React pre-compiler is more the issue than anything with electron.
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
add a comment |
I found a solution. You can run a preload.js into a window on creation and then call the items like javascript objects.
Found this issue on the github
https://github.com/electron/electron/issues/9920
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
Preload.js
const { dialog } = require('electron').remote.dialog;
window.electron = {};
window.electron.dialog = dialog;
Then anything I want to load into the window I can just add to the window.electron object and call it with no issues. React pre-compiler is more the issue than anything with electron.
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
add a comment |
I found a solution. You can run a preload.js into a window on creation and then call the items like javascript objects.
Found this issue on the github
https://github.com/electron/electron/issues/9920
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
Preload.js
const { dialog } = require('electron').remote.dialog;
window.electron = {};
window.electron.dialog = dialog;
Then anything I want to load into the window I can just add to the window.electron object and call it with no issues. React pre-compiler is more the issue than anything with electron.
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
I found a solution. You can run a preload.js into a window on creation and then call the items like javascript objects.
Found this issue on the github
https://github.com/electron/electron/issues/9920
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
Preload.js
const { dialog } = require('electron').remote.dialog;
window.electron = {};
window.electron.dialog = dialog;
Then anything I want to load into the window I can just add to the window.electron object and call it with no issues. React pre-compiler is more the issue than anything with electron.
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
answered Nov 26 '18 at 17:45
user2927848user2927848
643318
643318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426331%2fopen-file-dialog-from-react-component-using-electron%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried to cast a event from the main thread and listen for it on the renderer thread?
– Nino9612
Nov 23 '18 at 10:20
I think it is failing because of the React pre-compiler not understanding what is going on. Not anything innately wrong with the code. I'll need to dispatch an even from the render thread to trigger it on the main thread in this situation unless I want to put it in a menu or something. Goal is to have a nice looking html button spawn the file dialog.
– user2927848
Nov 24 '18 at 2:07