WedX - журнал о программировании и компьютерных науках

Как выбрать файл ИЛИ папку в файловом диалоге

Как бы кто-нибудь открыл диалоговое окно файла в Node.js/electron, чтобы иметь возможность выбрать папку или файл.

Когда я использую

<input type="file"/>

он откроет диалоговое окно файла, но не позволит мне выбрать папку. Но когда я пытаюсь

<input type="file" webkitdirectory/>

это откроет диалоговое окно, но не позволит выбрать папку.

То, что я хочу сделать, это просто иметь одну кнопку ввода, или это не обязательно должна быть кнопка, а способ запустить собственный системный файловый менеджер для обеих возможностей.

node.js javascript file electron
27.06.2017

  • Вероятно, вы имели в виду but won't allow for file selection. 27.06.2017
  • github.com/ electronic/electron/blob/master/docs/api/ говорит, что это невозможно для Windows и Linux (разве это не означает, что это возможно для osX?) Но это звучит как лучший способ открыть этот диалог для все равно электрон. 27.06.2017

Ответы:


1

Вы можете инициировать file system open dialog из Renderer Process (окна браузера).

На вашем Main Process вы слушаете Renderer Process, в случае, если команда open-file-dialog отправлена ​​с Renderer Process, Main Process отобразит Диалоговое окно открытия файла для операционной системы (как показано ниже, свойство ['openFile'] отправляется, и вы также можете использовать ['openDirectory'] для диалогового окна Открыть каталог или оба варианта) и отправит обратно выбранный файл\путь в папку Renderer Process.

Процесс визуализации

//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}`

});

Основной процесс

//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)
  })
})
27.06.2017
  • Фантастический! Спасибо за отличный образец. Я искал это день или два и не мог найти/не знал, что искать, чтобы найти системные диалоги в Электроне. Большая помощь! 24.10.2019

    • 2

    Для тех, кто сталкивается с подобными проблемами, это работает только для электрона. Но у электрона есть встроенный API-интерфейс файлового диалога, который немного более гибкий, чем собственный HTML.

    Код выглядит примерно так

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

    dialog.showOpenDialog({
      properties: ["openDirectory","openFile"]
    },function (fileNames) {
      // do cool stuff here
    });
    27.06.2017

    3

    Попробуйте добавить directory, а также webkitdirectory. В противном случае см. эти:

    Выбор каталога на HTML-странице

    Как получить папку каталог из файла типа ввода HTML или любым другим способом?

    27.06.2017
    Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]