How to allow a user to select a directory in electron?

I am creating a front end for one of my python scripts, decided on using electron. The script basically takes a folder of videos and makes gif from the videos in the folder. Because the folder on the users system where they store the videos they want to turn into gifs will change I need for the user to be able to select the directory they are using and then select a second directory where the gifs will save.

So far I have the dialog box opening, I can select directories but it returns with the number of files in that directory as opposed to the path.

Below is a copy of the code I currently have set up:

Main.js

    const{dialog,ipcMain} = require('electron')
ipcMain.on('selectDir',async(event,arg)=>{
    const result = await dialog.showOpenDialog(mainWindow,{
        properties:['openDirectory','createDirectory'],
    })
    console.log('directories selected', result.filePaths)
})

renderer.js

var selectDir = document.getElementById('dirs').files[0].path;
selectDir.addEventListener('click',()=>{

    window.postMessage({
        type:'selectDir'
    })
})

preload.js:

const{ipcRender}= require('electron')

    process.once('loaded',() =>{
        window.addEventListener('message',evt=>{
            if(evt.data.type === 'selectDir'){
                ipcRender.send('selectDir')
            }
        })
    })

html:

<body>
    <div class='page_container'>
        <p>Add an The Directory Containing your videos and where you would like the gif's to be saved to and watch as your videos randomly create gifs</p>
            <input type='file' id='dirs' webkitdirectory/>
    </div>
</body>
<script src="./renderer.js"></script>

The bulk of the code was from jaketrent.com/post/select-directory-in-electron with some modification that I found from other posts on stackoverflow where people had said that they were able to retrieve the directory path by adding the .file[0]

The goal is to have the selected directory printed out in the window (as a file would normally be) so that that path can then be sent to the python script.

If anyone can point out where I seem to have gone wrong or has a link to further information on this, that would be awesome.

The openDirectory option in the mainjs as I understand should force a directory selection but without having the webkit on the html it reverts back to a standard file picker, I havnt been able to work out why that is yet.

I can post the whole main.js but other than what's in the snippet above it's pretty much the same as what's in the getting started file.