Electron でファイルを読み込む

ドラッグ・アンド・ドロップ で読み込む

ドラッグ・アンド・ドロップ で画像ファイルを読み込みます。

<div>ファイルをここにドラッグ</div>
<div id="image-view"></div>
<script>
    document.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();

        for (const f of e.dataTransfer.files) {
            console.log('File(s) you dragged here: ', f.path)
            const img = document.createElement('img');
            img.src = f.path;
            document.getElementById('image-view').appendChild(img);
        }
    });
    document.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
    });
</script>

ファイル選択ダイアログ で読み込む

ファイル選択ダイアログ で画像ファイルを読み込みます。

<input type="file" id="image_uploads" accept="image/png, image/jpeg">
<div id="image-view"></div>
<script>
    document.getElementById('image_uploads').addEventListener('change', (e) => {

        for (const f of e.target.files) {
            console.log('File(s) you dragged here: ', f.path)
            const img = document.createElement('img');
            img.src = f.path;
            document.getElementById('image-view').appendChild(img);
        }

    });
</script>

Electron のネイティブ呼び出しで読み込む

Electron のネイティブシステムを使って、画像ファイルを読み込みます。

この方法は Electron でしか使えません。

<button type="button" id="image_uploads">ファイルを選択</button>
<div id="image-view"></div>
<script>
    document.getElementById('image_uploads').addEventListener('click', () => {
        const { dialog } = require('electron').remote;
        let files = dialog.showOpenDialogSync({ filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }] })

        for (const f of files) {
            console.log('File(s) you dragged here: ', f)
            const img = document.createElement('img');
            img.src = f;
            document.getElementById('image-view').appendChild(img);
        }

    });
</script>

Electron の エントリーポイント JavaScript を修正

上記方法を試す場合は、BrowserWindow の webPreferences に「enableRemoteModule: true」を追加する必要があります。

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 300,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })
  win.loadFile('./public/index.html')
}
app.whenReady().then(createWindow)