Electron: Holen Sie sich den vollständigen Pfad der hochgeladenen Datei

Question

Ich bin buildind jetzt GUI mit Electron. (wie PhoneGap für Desktop-Anwendungen)

Gibt es eine Möglichkeit, den vollständigen Pfad für die Datei aktiviert in <input type="file"> zu aktivieren?
Jetzt von C:\fakepath\dataset.zip installiert. (Der Verzeichnisname ist nicht "fakepath", aber das ist der Wert document.getElementById("myFile").value)

Oder gibt es andere Möglichkeit, eine Datei auszuwählen?

Answer 1

Electron fügt eine path Eigenschaft File Objekte, so können Sie den tatsächlichen Pfad von dem Eingangselement erhalten mit:

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

Answer 2

Es ist aus Sicherheitsgründen nicht möglich, das zu tun, was Sie versuchen, gemäß dieser Antwort How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?.

Sie könnten jedoch eine Arbeit wie in einem Elektronprojekt, an dem ich arbeitete, tun.

1. erstellen HTML-Schaltfläche

2. Dann im Renderer-Prozess ein Ereignis-Listener Sie vor erstellt die Schaltfläche erstellen.

   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. Dann im Hauptprozess verwenden Sie die showOpenDialog eine Datei zu wählen, und dann die full path zurück an den Renderer-Prozess senden.

   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. Dann im Renderer-Prozess Sie die full path bekommen.

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

So können Sie ein ähnliches Verhalten als die Eingabetyp-Datei und den vollständigen Pfad bekommen.

Answer 3

<script>const electron = require('electron');</script> 
<button id="myFile" onclick="this.value=electron.remote.dialog.showOpenDialog()[0]">UpdateFile</button> 

nun die document.getElementById("myFile").value würde den vollständigen Pfad der ausgewählten Datei enthalten.