#Saving uploaded image in folder

30 messages · Page 1 of 1 (latest)

warped glade
#

what exactly is the output/error?

viscid path
#

It just doesnt work

#

cant seem to upload image

#

i am good at front end

#

I can get it to upload img for example in same folder as index.html, but I cannot retrieve it

#

And that is when i run npm start

warped glade
#

can you paste the full contents of the file(s) or link a repo?

viscid path
#

i am gonna upload everything to repo

#

if that is easier for you

viscid path
#

FIXED

hearty raven
# viscid path FIXED

Maybe you could share the fix so if another person has the same problem they can find a solution.

viscid path
#

Oh, okay.

#

So instead of using input type=file, and localStorage to save image, i used a electrons file handler

#

Works like a charm

odd berry
viscid path
#

Np, is it okay if i make a codepen and share it?

#

Or do you want for me to paste code here

odd berry
viscid path
#

<button id="inputFileID" class="inputFile" onclick="uploadImage()">Change background</button><br>
<span>Current image:</span><br>
<img id="current-image" alt="Current Image">

#

HTML: this is just a button so you know what that works

#

function uploadImage() {
ipcRenderer.send('open-file-dialog');

ipcRenderer.on('file-dialog-closed', (event, filePath) => {
    console.log('Selected image path:', filePath);

    localStorage.setItem('customBackground', filePath);
    document.getElementById('inputFileID').innerHTML = 'Background uploaded!';
    document.getElementById('current-image').src = `file://${filePath}`;
    setTimeout(function () {
        location.reload();
    }, 1000);
});

}

#

this is renderer.js

#

i added this setTimeout(function () {
location.reload();
}, 1000); so it puts background new image after 1seconds

#

and last but not least: main.js:

#

ipcMain.on('open-file-dialog', async (event) => {
const result = await dialog.showOpenDialog({
properties: ['openFile'],
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
],
});

if (!result.canceled && result.filePaths.length > 0) {
const selectedImagePath = result.filePaths[0];

const destinationFolder = path.join(app.getPath('userData'), 'images');

if (!fs.existsSync(destinationFolder)) {
  fs.mkdirSync(destinationFolder);
}

const fileName = path.basename(selectedImagePath);

const destinationPath = path.join(destinationFolder, fileName);

fs.copyFileSync(selectedImagePath, destinationPath);

event.reply('file-dialog-closed', destinationPath);

}
});

#

filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
],
change this if you want to accept other files

#

feel free to ask if you encounter some problmes

#

also, maybe this can come you handy:

#

const customBackground = localStorage.getItem('customBackground');
if (!customBackground) {
backgroundImage.src = 'images/bg.JPG';
document.getElementById('current-image').src = 'images/bg.JPG';
}
else {
backgroundImage.src = file://${customBackground};
document.getElementById('current-image').src = file://${customBackground};
}

#

this is at the begining of the scirpt