File explorer inside window browser


#1

Hello there,
I’m quite new here, and I’m trying to achieve a program that can browse inside an specific folder (Just like VSCode or Atom do when you open a project folder) and have a visual representation with thumbnails.

So far reading the docs I only find how to open a dialog box. Is there any place to look how could I achieve what I’m trying?

Thanks in advance


#2

You want to use Node’s fs module.


#3

Yeah you’re right, I did, but how can I draw the list I get into the screen with icons or thumbs? I only reach to print the array into the console.
Do I need another module or so?


#4

The same way you would for any other content you want to display. I can’t provide any more specific advice unless you first give me an idea of how familiar you are with JavaScript and what framework(s) (if any) you are already using.


#5

I’m fairly new using JavaScript, I used it inside AfterEffects to create some plugins. But it’s the first time I’m using electron and js.
From my latest research, I think I should be using ‘react’ and ‘flux’ but I’m not sure at all.


#6

You should start by getting familiar with DOM manipulation as a concept. If you use the frameworks well, you won’t have to do much of it, but you should know what’s being replaced. You won’t need Flux because it was built for organizing applications that are interacting with a bunch of different end points at once, but you just want to show data to one user. React is fine for your purpose, since what you want is to turn a JS object into a series of HTML elements and update the display in response to input. React is fine, but it might be more than you need. While you’re reading about React, take a gander at etch. Etch was developed to allow for writing components for Atom in a simple and consistent manner, and the syntax is pretty much the same. What both React and Etch do is take an HTML-like template that you give them (called JSX) and assemble a series of element creation calls behind the scenes. Once you follow the first thing I told you and figure out why it sucks to use a bunch of .append() calls every time your data changes, you will have an understanding of why React/Etch are nice for automating the process.

For this specific project, the first thing you should do is have your Electron app use document.write() to print the entire directory to the window. Once you’re there, you’ll be ready to wrap that up into a component.

It would also be helpful if you shared your code (preferably in the form of a GitHub repo), because I can tell you what needs to be done but not exactly how to get there unless I see where you currently are.


#7

Thank you so much for your fast response. I’m looking at what you shared.
I’m attaching the project’s repo so the code is able to inspect.
gitlab repo

What I’m trying to achieve is having a local file explorer inside Electron’s window browser that show video files you can click and play (via lightbox or external player).
(something like this)


#8

here’s what I got so far:

const fs = require('fs');

let directory = "../video/local";
let dirBuffer= Buffer.from(directory);

let files = []
files = fs.readdirSync(directory);
console.log(files)

function displayLocalFiles(files) {
var fileList = document.getElementById('video-list');
var vid = document.getElementById('video-placeholder');

for(var i = 0; i < files.length; i++){
   console.log(files[i]); 

   fileList.innerHTML = document.getElementById('video-list').innerHTML + 
    //Need to link thumnails with videos in order to click on thumbnail and open a video
    `<li class="list-group-item">
        <a href="localvideo[i].mp4" id= 'video-placeholder'>
            <img src="${files[i].path}" alt="thumb" class="thumbnail">
        </a>
        <div>${document.write(files[i])}</div>
    </li>`
    };
    this.addEventListeners();
}

#9

Good start. React’s approach is very similar. It starts with an HTML tag with an id (my HTML file does not include any <script> tags because those get added by Webpack, a framework that automates the process of putting all of your stuff together). That id gets grabbed by the React script and replaced by a set of HTML elements generated by the script. Note that these are not HTML tags; they’re JSX tags, and React interprets them behind the scenes into functions that actually create the elements. It’s basically like writing HTML, but you get to use your JavaScript classes as HTML tags. I’m going to skip the next couple of steps in the chain, because this app I’m showing you was a project that I was doing to explore a method of app design that’s meant for having much larger apps be scalable and maintainable. The important part is here, where my script uses a mixture of imported classes and my own classes to assemble a template for the page that React will build into what the user sees. You can see here how I dynamically create a list of videos. The Menu.Item comes from the package semantic-ui-react, but you can easily create your own component with the li>(a>img, div) structure you’re using.