Image File Upload and Retrieve in Electron

Question

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 ?

Answer 1

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
  });
}

Answer 2

Updated answer:

The dialog.showOpenDialog() returns a promise

const electron = require('electron');
const { dialog } = electron;    // electron.remote; (if in renderer process)
const fs = require('fs');       // module that interacts with the file system
const path = require("path");   // utilities for working with directory paths

function uploadImageFile() {

    // opens a window to choose file
    dialog.showOpenDialog({properties: ['openFile']}).then(result => {

        // checks if window was closed
        if (result.canceled) {
            console.log("No file selected!")
        } else {

            // get first element in array which is path to file selected
            const filePath = result.filePaths[0];

            // get file name
            const fileName = path.basename(filePath);

            // path to app data + fileName = "C:\Users\John\AppData\Roaming\app_name\picture.png"
            imgFolderPath = path.join(app.getPath('userData'), fileName);

            // copy file from original location to app data folder
            fs.copyFile(filePath, imgFolderPath, (err) => {
                if (err) throw err;
                console.log(fileName + ' uploaded.');
            });
        }
    });
}

// click event to trigger upload function
// In html:  <input type="button" class="upload-image" value="Upload Image">

$(".upload-image").on("click", () => {
    uploadImageFile()
});