Image File Upload and Retrieve in Electron
I am trying to build an application in Electron which has a html form with image Upload button. So my purpose is to ask the user to upload an image and i want to save the image file somewhere in the local folder within the app and retrieve the image whenever i need.How would i achieve this ?
javascript html electron
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
add a comment |
I am trying to build an application in Electron which has a html form with image Upload button. So my purpose is to ask the user to upload an image and i want to save the image file somewhere in the local folder within the app and retrieve the image whenever i need.How would i achieve this ?
javascript html electron
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
add a comment |
I am trying to build an application in Electron which has a html form with image Upload button. So my purpose is to ask the user to upload an image and i want to save the image file somewhere in the local folder within the app and retrieve the image whenever i need.How would i achieve this ?
javascript html electron
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
I am trying to build an application in Electron which has a html form with image Upload button. So my purpose is to ask the user to upload an image and i want to save the image file somewhere in the local folder within the app and retrieve the image whenever i need.How would i achieve this ?
javascript html electron
javascript html electron
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
edited Dec 30 '18 at 17:12
Akshar Kashyap
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
asked Dec 30 '18 at 17:04
Akshar KashyapAkshar Kashyap
32
32
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If I understand you correctly, you intend to store the image on the user's computer so there's no need to do a remote upload. You simply have to copy the file from its original location to the application local data path.
To achieve this, you could add to your form a button which would first trigger a dialog to let the user browse for the file.
Then you would copy the chosen file to your application local data path.
After that, the idea would be to store some information about the image file so that you can retrieve it for later use.
const { app, dialog } = require('electron');
const fs = require('fs');
const path = require("path");
// The function triggered by your button
function storeImageFile() {
// Open a dialog to ask for the file path
const filePath = dialog.showOpenDialog({ properties: ['openFile'] })[0];
const fileName = path.basename(filePath);
// Copy the chosen file to the application's data path
fs.copyFile(filePath, (app.getPath('userData') + fileName), (err) => {
if (err) throw err;
console.log('Image ' + fileName + ' stored.');
// At that point, store some information like the file name for later use
});
}
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned aStringeven for a single file selection, so you simply have to append[0]for instance.
– stoneLeaf
Jan 3 at 10:56
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%2f53979681%2fimage-file-upload-and-retrieve-in-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
If I understand you correctly, you intend to store the image on the user's computer so there's no need to do a remote upload. You simply have to copy the file from its original location to the application local data path.
To achieve this, you could add to your form a button which would first trigger a dialog to let the user browse for the file.
Then you would copy the chosen file to your application local data path.
After that, the idea would be to store some information about the image file so that you can retrieve it for later use.
const { app, dialog } = require('electron');
const fs = require('fs');
const path = require("path");
// The function triggered by your button
function storeImageFile() {
// Open a dialog to ask for the file path
const filePath = dialog.showOpenDialog({ properties: ['openFile'] })[0];
const fileName = path.basename(filePath);
// Copy the chosen file to the application's data path
fs.copyFile(filePath, (app.getPath('userData') + fileName), (err) => {
if (err) throw err;
console.log('Image ' + fileName + ' stored.');
// At that point, store some information like the file name for later use
});
}
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned aStringeven for a single file selection, so you simply have to append[0]for instance.
– stoneLeaf
Jan 3 at 10:56
add a comment |
If I understand you correctly, you intend to store the image on the user's computer so there's no need to do a remote upload. You simply have to copy the file from its original location to the application local data path.
To achieve this, you could add to your form a button which would first trigger a dialog to let the user browse for the file.
Then you would copy the chosen file to your application local data path.
After that, the idea would be to store some information about the image file so that you can retrieve it for later use.
const { app, dialog } = require('electron');
const fs = require('fs');
const path = require("path");
// The function triggered by your button
function storeImageFile() {
// Open a dialog to ask for the file path
const filePath = dialog.showOpenDialog({ properties: ['openFile'] })[0];
const fileName = path.basename(filePath);
// Copy the chosen file to the application's data path
fs.copyFile(filePath, (app.getPath('userData') + fileName), (err) => {
if (err) throw err;
console.log('Image ' + fileName + ' stored.');
// At that point, store some information like the file name for later use
});
}
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned aStringeven for a single file selection, so you simply have to append[0]for instance.
– stoneLeaf
Jan 3 at 10:56
add a comment |
If I understand you correctly, you intend to store the image on the user's computer so there's no need to do a remote upload. You simply have to copy the file from its original location to the application local data path.
To achieve this, you could add to your form a button which would first trigger a dialog to let the user browse for the file.
Then you would copy the chosen file to your application local data path.
After that, the idea would be to store some information about the image file so that you can retrieve it for later use.
const { app, dialog } = require('electron');
const fs = require('fs');
const path = require("path");
// The function triggered by your button
function storeImageFile() {
// Open a dialog to ask for the file path
const filePath = dialog.showOpenDialog({ properties: ['openFile'] })[0];
const fileName = path.basename(filePath);
// Copy the chosen file to the application's data path
fs.copyFile(filePath, (app.getPath('userData') + fileName), (err) => {
if (err) throw err;
console.log('Image ' + fileName + ' stored.');
// At that point, store some information like the file name for later use
});
}
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
If I understand you correctly, you intend to store the image on the user's computer so there's no need to do a remote upload. You simply have to copy the file from its original location to the application local data path.
To achieve this, you could add to your form a button which would first trigger a dialog to let the user browse for the file.
Then you would copy the chosen file to your application local data path.
After that, the idea would be to store some information about the image file so that you can retrieve it for later use.
const { app, dialog } = require('electron');
const fs = require('fs');
const path = require("path");
// The function triggered by your button
function storeImageFile() {
// Open a dialog to ask for the file path
const filePath = dialog.showOpenDialog({ properties: ['openFile'] })[0];
const fileName = path.basename(filePath);
// Copy the chosen file to the application's data path
fs.copyFile(filePath, (app.getPath('userData') + fileName), (err) => {
if (err) throw err;
console.log('Image ' + fileName + ' stored.');
// At that point, store some information like the file name for later use
});
}
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
edited Jan 3 at 10:54
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
answered Dec 30 '18 at 18:10
stoneLeafstoneLeaf
225
225
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned aStringeven for a single file selection, so you simply have to append[0]for instance.
– stoneLeaf
Jan 3 at 10:56
add a comment |
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned aStringeven for a single file selection, so you simply have to append[0]for instance.
– stoneLeaf
Jan 3 at 10:56
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i am getting the following error- The "path" argument must be of type string.
– Akshar Kashyap
Dec 31 '18 at 6:00
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
i have solved it by modifying the following line - const filePath = dialog.showOpenDialog({ properties: ['openFile'] }).toString()
– Akshar Kashyap
Dec 31 '18 at 6:04
I missed the fact that it returned a
String even for a single file selection, so you simply have to append [0] for instance.– stoneLeaf
Jan 3 at 10:56
I missed the fact that it returned a
String even for a single file selection, so you simply have to append [0] for instance.– stoneLeaf
Jan 3 at 10:56
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%2f53979681%2fimage-file-upload-and-retrieve-in-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
