Electron: get full path of uploaded file

It is not possible to do what you are trying for security reasons, according this answer How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?.

However you could do a work around like I did in an electron project I worked on.

1. Create a HTML button

2. Then in the renderer process create an event listener to the button you created before.

   const ipc = require('electron').ipcRenderer;
   const buttonCreated = document.getElementById('button-created-id');
   
   buttonCreated.addEventListener('click', function (event) {
       ipc.send('open-file-dialog-for-file')
   });
   

3. Then in the main process you use the showOpenDialog to choose a file and then send the full path back to the renderer process.

   ipc.on('open-file-dialog-for-file', function (event) {
    if(os.platform() === 'linux' || os.platform() === 'win32'){
       dialog.showOpenDialog({
           properties: ['openFile']
       }, function (files) {
          if (files) event.sender.send('selected-file', files[0]);
       });
   } else {
       dialog.showOpenDialog({
           properties: ['openFile', 'openDirectory']
       }, function (files) {
           if (files) event.sender.send('selected-file', files[0]);
       });
   }});
   

4. Then in the renderer process you get the full path.

   ipc.on('selected-file', function (event, path) {
       console.log('Full path: ', path);
   });
   

Thus you can have a similar behaviour than the input type file and get the full path.

<script>

    const electron = require('electron');
    const { ipcRenderer } = electron;
    const ko = require('knockout')
    const fs = require('fs');
    const request = require('request-promise');

    // replace with your own paths
    var zipFilePath = 'C:/Users/malco/AppData/Roaming/Wimpsdata/Wimpsdata.zip';
    var uploadUri = 'http://localhost:59887/api/Collector/Upload'

    var request = require('request');
    request.post({
        headers: { 'content-type': 'application/zip' },
        url: uploadUri,
        body: fs.createReadStream(zipFilePath)
    }, function (error, response, body) {
        console.log(body);
        location.href = 'ScanResults.html';
    });
</script>

ASP .NET WebAPI Conontroller

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.IO.Compression;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using Wimps.Services.Business;

namespace Wimps.Services.Controllers
{
    public class CollectorController : ApiController
    {

        public async Task<bool> Upload()
        {
            try
            {
                var fileuploadPath = ConfigurationManager.AppSettings["FileUploadLocation"];

                var provider = new MultipartFormDataStreamProvider(fileuploadPath);
                var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true));
                foreach (var header in Request.Content.Headers)
                {
                    content.Headers.TryAddWithoutValidation(header.Key, header.Value);
                }

                Byte[] byteArray = await content.ReadAsByteArrayAsync();

                string newFileName = Guid.NewGuid().ToString();
                string newFilePath = fileuploadPath + "\\" + newFileName + ".zip";
                if (File.Exists(newFilePath))
                {
                    File.Delete(newFilePath);
                }

                File.WriteAllBytes(newFilePath, byteArray);

                string unzipTo = fileuploadPath + "\\" + newFileName;
                Directory.CreateDirectory(unzipTo);

                DirectoryInfo di = new DirectoryInfo(unzipTo);
                foreach (FileInfo file in di.GetFiles())
                {
                    file.Delete();
                }

                ZipFile.ExtractToDirectory(newFilePath, unzipTo);



                return true;
            }
            catch (Exception e)
            {
                // handle exception here
                return false;
            }
        }
    }
}

Need to add key to web config for file upload

<configuration>
  <appSettings>
... other keys here
    <add key="FileUploadLocation" value="C:\Temp\Uploads" />
  </appSettings>

rest of app config ... ...

Electron adds a path property to File objects, so you can get the real path from the input element using:

document.getElementById("myFile").files[0].path