W jaki sposób ktoś otworzy okno dialogowe w Node.js / Electron, aby móc wybrać folder lub plik.

Kiedy używam

<input type="file"/> 

Otworzy okno dialogowe Plik, ale nie pozwolę mi wybrać folderu. Ale kiedy próbuję

<input type="file" webkitdirectory/> 

Otworzy okno dialogowe, ale nie pozwolę na wybór folderu.

To, co chcę zrobić, to tylko jeden przycisk wprowadzania lub nie musi być przyciskiem, ale sposób na uruchamianie natywnego Eksploratora plików systemowych dla obu możliwości.

11
Dringo 27 czerwiec 2017, 08:49

3 odpowiedzi

Najlepsza odpowiedź

Możesz zainicjować file system open dialog z Renderer Process (okno przeglądarki).

Na twojej {x0}} słuchasz Renderer Process, w przypadku polecenia open-file-dialog jest wysyłana z Renderer Process, Main Process wyświetli Otwórz okno dialogowe pliku na system operacyjny (jak pokazano poniżej, właściwość ['openFile'] jest wysyłana, a można również użyć ['openDirectory'] dla Directory Directory Dialog, lub obaj) i wyślemy wybrany plik ścieżki do Renderer Process.

Proces renderowania

//Adding an event listener to an html button which will send open-file-dialog to the main process
const ipc = require('electron').ipcRenderer
const selectDirBtn = document.getElementById('select-file')

selectDirBtn.addEventListener('click', function (event) {
     ipc.send('open-file-dialog')
});

//Getting back the information after selecting the file
ipc.on('selected-file', function (event, path) {

//do what you want with the path/file selected, for example:
document.getElementById('selected-file').innerHTML = `You selected: ${path}`

});

główny proces

//listen to an open-file-dialog command and sending back selected information
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-file-dialog', function (event) {
  dialog.showOpenDialog({
    properties: ['openFile']
  }, function (files) {
    if (files) event.sender.send('selected-file', files)
  })
})
8
Alon Adler 27 czerwiec 2017, 17:12

Dla każdego, kto pracuje w podobnych kłopotach, to działa tylko dla elektronów. Ale elektron ma funky dialogowe pliki API wbudowane w ten sposób jest nieco bardziej elastyczny niż rodzimy HTML.

Kod wygląda na coś takiego

    const {dialog} = require('electron').remote;

    dialog.showOpenDialog({
      properties: ["openDirectory","openFile"]
    },function (fileNames) {
      // do cool stuff here
    });
2
Dringo 27 czerwiec 2017, 14:51

Spróbuj dodać directory, a także webkitdirectory. W przeciwnym razie zobacz:

Katalog Wybiera się na stronie HTML

Jak uzyskać katalog folderów z wpisu HTML "Plik" lub inny sposób?

2
Dale 27 czerwiec 2017, 06:35