how to handle file input field in electron js app

Question

I have a simple

node-js express ejs

application working fine on the localhost machine. this application has a form that has a file input field to upload a .jpg file on the server.

I need to use this application as a desktop application for which I have looked forward to electron-js for a cross-platform application.

I have seen many tutorials on the web to run the node express app on electron and followed the instruction according.

as a result, I have been able to successfully cast the application into the electron-js app.

to achieve this, I have used npx crate-electron-app myapp to generate the boilerplate for electron app and in the src folder, I have copied all my express app files.

my folder structure looks like this

the express related codes are in app.js file

const express=require('express')
const app=express()
const path = require('path')
const port = '3333'

app.set("view engine", "ejs");
app.set('views', path.join(__dirname, 'views'));
app.use(express.urlencoded({ extended: true }));
app.use(express.json())

app.use(express.static(path.join(__dirname, 'public')));

app.use('/api/crud', require('./router/_crud'))
app.use('/sys', require('./router/setup'))
app.use('/app', require('./router'))
app.get("/", (req, res) => res.render("index"));    
   
app.listen(port, ()=>console.log(`app address http://localhost:${port}`))

and the electron related codes are in index.js file

const { app, BrowserWindow } = require('electron');
const path=require('path');
require('./app'); //your express app

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
 
  const mainWindow = new BrowserWindow({
    width: 1600,    height: 900,    minHeight: 768,    minWidth: 1366,
    webPreferences: {      nodeIntegration: true,      contextIsolation: true,      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js'),
    }
  });

  
  mainWindow.loadURL('http://localhost:3333');
  
};


app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

when I start the electron . npm script the application run perfectly but as soon as I select the file input in the form it doesn't upload the file and hangs till the form is open if I use the form without file upload then it works as usual.

when I click on the file upload input field it gives the following lines in the console window

something like this.

2022-04-09T17:59:39.167ZE [2144:ShellIpcClient] shell_ipc_client.cc:129:Connect Can't connect to socket at: \\.\Pipe\GoogleDriveFSPipe_RAJ_shell
i have searched many articles on web but no gain.

my web form looks like this

could anybody help me with how to overcome this issue?

I have not used any preload script or IPC main/renderer script as I don't know much about them but whatever I have read from the web sources I found that these files have some role to handle file dialog. maybe you can help me with how to write these files to achieve file input.

Answer 1

well, after a lot of research work and having gone throw many articles on the internet I was finally able to resolve the issue.

I created a blank project on electron and tested the same scenario and found that there was no problem over there with file upload, hence there was something wrong in the project itself.

the problem was with the path of the upload folder. electron needs to be given a static path with path.join(__dirname, <your destination path>) which I very well know in the beginning and I had given a path without the path.join function.

so when I changed the upload folder path with path.join() function it worked smoothly. no errors at all.

i am sharing the full code where i have resolved the issue. the code in the comment was causing the problem

const multer=require('multer')
const fileStorageEngine=multer.diskStorage({
  destination: (req, file, cb) => {
    // cb(null,'./src/public/images/')
    cb(null, path.join( __dirname , '../public/images'))
  },
  filename: (req, file, cb) => {        
    cb(null, Date.now() + '.jpg')
  }
})
const upload = multer({ storage: fileStorageEngine })

thanks.