Building a Web Based File Browser with jsTree, Angularjs and Expressjs8 min read

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

In this post, we are going to build a web based File Browser with Angularjs, Expressjs and jsTree (a super awesome jquery tree plugin). We will be using a jsTree directive named jsTree-directive written by me to leverage jsTree (jQuery Plugin) inside an Angularjs application. (You can find the complete documentation of the directive here.)

The main purpose of the file browser app is to show a tree view of a certain directory on a web page. And when the user clicks on a file, we will show the contents of the file. A simple application to showcase the power of jstree directive and also jsTree and Expressjs integration.

The final product will look like

Screen Shot 2014-08-27 at 7.15.45 am Screen Shot 2014-08-27 at 7.16.25 am Screen Shot 2014-08-27 at 7.17.06 am

You can find a live demo here and the completed code here.

So, Let us get started.

File Browser App

As described above, we will be building a tree using the jsTree directive. The content of the tree will be loaded via AJAX. The Express server, will read the contents of node_modules folder and will print out all the files in a given folder. And then, we will update the tree with the response. As the user drills down the folder, we fetch and show the files/folders in the current requested directory.

Now, when a user clicks a file, we will fetch the contents of it and display on the right hand side part.

Getting Started with Server Side

First, create a new folder named myFileBrowserApp. To keep things organized, we will create 2 folders named server and client. As the names suggest, the server will contain the Express/Node code and the client will contain the Angularjs/jsTree and UI code.

First, we will work on the server. Open a new terminal/prompt at the root of the project folder and run

npm init

And fill it up as applicable. Now, we will add a few dependencies to run the project. Execute

npm i express morgan ejs debug cookie-parser body-parser --save

This will install the required dependencies to run the project. To maintain our project, we will be using Gulp. Execute

npm i --save-dev gulp gulp-jshint gulp-livereload gulp-nodemon gulp-watch

to install gulp and its plugins as development dependencies. The final package.json will look like

Inside the server folder, create a new file named app.js. This file will contain the Express server configuration and initiation. Update it like

A very standard Expressjs config. You can read more about Expressjs here.

Next, we will add a new file named routes.js at the root of server folder. This file will contain all the routes. Updated it as

Things to notice

Line 10 : If the user hits the base URL  http://localhost:3000, we dispatch the index.html file to the client. This file will contain the Angularjs app.

Line 15 : This the end point, the jsTree plugin will look for data to render the tree. jsTree plugin is configured to send an id=1 when requesting the tree for the first time. Hence on line 17, we split the code into 2 pieces. If we are loading the tree for the first time on the page, we show all the first level folders of node_modules directory on the server. Else, we will fetch the requested folder’s files and display. Simple?

Line 19 : Here we invoke  processReq(), which is responsible for taking in a folder, reading all the files/folders in that folder. Once it reads all the files/folders, it will call processNode() on line 40.  processNode() will take a file/folder and return a Tree Node object for that file/folder.

Line 48 :  The tree node object should be in the below format.

Now, you have a good picture as what our server is going to respond based on the request from the tree.

Line 32 : We get the path of the file, passed in from the ID attribute of the node object (or you can configure the directive to send the file name in a different variable as well). And then we get the contents using  readFileSync() and dispatch it to the UI.

This closes most of our server side functionality.

To test this, we will run the server. Back to terminal/prompt and run

node server/app.js

Next, navigate to  http://localhost:3000/api/tree?id=1  and you should seeScreen Shot 2014-08-27 at 12.09.59 amThis is the folder listing (one level) of the node_modules folder. Sweet right?

To close the server side part, we will dispatch a web page, when the user navigates to  http://localhost:3000. Inside the server folder, create a new folder named views. Inside views folder, create a new file named index.html. Update it as below

Save all files and re-run node server/app.js  and navigate to   http://localhost:3000/ and you should see the page we built above. We will update this page, once we are done setting up the client.

Getting Started with Client Side

To manage most of our client side dependencies, we will be using bower. Install bower globally by running

Windows.Mac/*nix
npm i -g bower    sudo npm i -g bower

Once bower is installed, from the project root run

bower init

And fill it up as applicable. Next, we will create a new file named .bowerrc at the root of the project and update it as below

Next, we will install a few dependencies. Run

bower i --save jquery angular angular-route bootstrap jstree-directive

This will install the required dependencies.

Next up, we will add jsTree plugin dependencies, which are not available on bower. Inside the client folder, create a new folder named jstree. Next, Head to jstree.com, download the latest release and unzip it. Now, from the unzipped folder, copy the below to client/jstree

  • <unzipped>/dist/jstree.min.js file
  • <unzipped>/dist/themes folder

PS : Do note that if you want to make your app 100% Angular, load the jsTree Javascript dependencies using an Angular provider as a dependency.

The folder structure so far would look like Screen Shot 2014-08-27 at 12.38.55 amNow, create 3 new folders inside client named js, css and partials. The js folder will hold the Angular code. The css folder, some custom styles and finally partials to hold the angular templates.

Now, the updated server/views/index.html would look like

PS : Do note that if you want to make your app 100% Angular, load the jsTree Javascript source using an Angular provider as a dependency to jsTree.directive.

PS : We will add the missing resources soon.

Next, we will configure gulp. At the root of the project, create a new file named gulpfile.js and update it as

Save all file, back to terminal and run

gulp

This will start the server and reload the page on changes. Refresh  http://localhost:3000  and the output should not change.

Integrate the Server and Client

Now, create a new file name app.js inside client/js folder and update it as

This is our Angular module, that has ngRoute and jstree.directive as dependencies. If you are new to Angular refer this.

Next, create a new file named home.html inside client/partials folder and update it as

The above js-tree tag is the angular directive.  tree-ajax attribute provides the path to request for tree data. This is what we have built on our server side initially.  tree-events attribute will take in an jstree event separated by colon and then the scope function that needs to be called when the event is fired. (You can find more info here)

Next, create a file named controllers.js inside client/js and update it as

We include FetchFileFactory (an Angular factory responsible for fetching resources) as a dependency. We will create this in a moment.

Line 6 :  fileViewer  is a scope variable that shows the contents of file if present else the message.

Line 8 : Callback for the node click event. We check if the clicked node is a leaf or not based on the data we have sent from server and then call the  FetchFileFactory  to fetch the selected file’s content. Simple right!

And finally, we will create the FetchFileFactory. Create a new file named factory.js inside client/js folder and update it as

Now, we will update the styles. Create a new file named app.css inside client/css and update it as

As you can see from above, we are adding new icons for the folder and file. You can download the same from here and create a new folder inside client named imgs and dump them.

Save all the file and navigate to http://localhost:3000  and you should see

Screen Shot 2014-08-27 at 7.15.45 am

Screen Shot 2014-08-27 at 7.17.06 amHope you got a basic idea on how to integrate jsTree with Express and jsTree with Angularjs as well.


Thanks for reading! Do comment.
@arvindr21