'Load local files into iframe in Electron app

I'm building an app with Electron that lets you preview HTML5 banner ads stored locally on your machine.

So far, I have made it possible to select a directory containing all the files.

Once selected, the iframe's src is updated to that directory.

ipcRenderer.on('selected-directory', (event, data) => {
   // update preview
   const previewer = document.getElementById('preview-section-iframe')
   previewer.src = data.filePaths + '\\html\\'
}

However, the banner doesn't load in and the html looks like this:

<iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\BANNERS\300x600\html\">   
</iframe>

However, when hovering over the src in the dev tools, the src reads:

file:///G:/_projects/_dev/_electron_apps/test/electron-quick-start/G:\BANNERS\300x600\html\

It seems to be looking in the app files for the source. Is there a way to stop this?

javascripthtmlnode.jselectron


Solution 1:[1]

Your iframe is expecting one path to a file, you're giving him reference to one folder.

Try something more like this <iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\BANNERS\300x600\html\yourfile.extention">
</iframe>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cheikh Omar DJIGO

Related Questions