Node and Connect allows you to offer file operations to your clients through a web application.  A server is used to communicate between the client and the Node server.  This server simply receives a request from the client (using POST data) and returns the JSON from the Node server for the client to process.  

This document covers two possible setups.  The first setup assumes you have a web server and will simply host a normal web application on that server that will communicate with your client-side JavaScript.  The second setup gives you the ability to create a single application that provides all aspects of the system (client side GUI, server side logic, and web server).  Both use the same general concept for communicating and loading the page, however, the single application includes extra code for handling the server side operations and rendering the HTML.  You can simply switch between types in the server side section below.  It should also be noted that if you use the all-in-one approach you will not need to use the Client Side setup section below since the frontend is implemented in the server side code.

With the first setup (web application) all of the HTML is handled client side and the server is only receiving requests and returning the Node JSON to the client.  Essentially:

  1. Client initiates session (visits webpage)
  2. JavaScript sends POST data to server side web application
  3. Server side web application requests data from Node
  4. Server side web application sends Node data back to JavaScript
  5. JavaScript parses data accordingly
  6. JavaScript changes the HTML accordingly

The example below shows how to implement either a PHP, .NET (C#), Java or Ruby version of this server side web application.  In this example the server side code is very minimalistic since the bulk of the work is handled in JavaScript.  The server is mainly for authorizing against Node, you could think of it as a 'middle-man' between Node and JavaScript.  This example uses AJAX to get the data and perform operations without needing to reload the page and uses jQuery for targeting elements and creating a clean, user friendly interface.

With this approach we can offer the ability to download multiple files by clicking each file or the "Download All" button under the cog (simultaneous downloads), as well as uploading multiple files.  When download/uploads take place the area behind them turns into their progress bars to provide a clean, minimalistic design.

For the web application the JavaScript code remains the same regardless of the server side language.  To implement this example on your own machine you simply need to copy the code for your preferred server language and change the global variables. JavaScript handles most of the work including parsing the JSON using JSON.parse() which is supported in all modern browsers and includes support for Internet Explorer 8+ and Firefox 3.5+.  If you need to support earlier versions we recommend using jQuery.parseJSON() which can be found in jQuery 1.4.1+, which supports Internet Explorer 6+.

Getting Started

 Download Full Example

To get this example working you first need to decide what type of web server you are going to use or what type of server you currently use.  We offer a simple to implement server side web application that works by simply changing the variables to match your Node setup.  However, you are free to customize it further to meet your needs or business logic.  Since the bulk of the work is done client side can simply use any web server to host your JavaScript and HTML/CSS or reference the JavaScript in your Content Management System.

This example offers the ability to:

  • List Files (browse)
  • Download (download_setup)
  • Upload (upload_setup)
  • Delete File/Directory (delete)
  • Create Directory (create)
  • Rename File/Directory (rename)

You can include additional operations as needed or remove operations that are not needed.

Files Needed

If you download the example above you will receive all of the files listed on this page.  There are also a few third party libraries being referenced using their CDNs (for a production environment we recommend downloading these and hosting them on your own server [except for the Aspera Libraries]).  Below is a list of the third party libraries being used from CDNs.

  • jquery.min.js (JavaScript) - jQuery v1.11.2 (Required)
  • connect/*.js (JavaScript) - Aspera libraries for Connect (Required)
  • bootstrap.min.js/css (JavaScript and CSS) - Bootstrap core (Optional)

Server Side Setup

Depending on your needs you can either use a full server approach or a regular web application. The full server approach is a single application that serves as its own web server and the one application provides everything for delivering the site. The HTML, JavaScript and CSS are embedded in the application code and this does not require the server being used to have any web server service (IIS or Apache) running. If you choose the regular web application you can simply run the server side web application like any other web application in your environment (this does not provide any HTML, JavaScript or CSS and needs the code found in the Client Site Setup Section.

Once you know what type of web server you are going to use you need to simply copy and paste the code below for your setup into your web server and compile it (if needed).  Simply choose your language below to get the code.  Remember to change the global variables to match your Node setup.  Since some languages require you to run on a different port or your setup may have your server side web application on a different domain you need to consider CORS (Cross Origin Resource Sharing).  As part of the server side web application a "Access-Control-Allow-Origin" header is returned stating what domains can pull resources from this server.  In the example we have it setup to "*" which means any, however, for security you should change this to the list of specific domains that are allowed to pull resources from your server side web application.

To begin, choose your preferred language and then choose whether you want the full server application (self serving, all-in-one application) or just the Web Application (basic web application for talking to Node and JavaScript).

Requirements

  • In addition to a normal PHP 5 Server you need the php-curl extension
    • If using a WAMP bundle php-curl was already installed
    • In Linux install php5-curl using your preferred package manager
    • Remember to restart your web server service after installing php-curl

 

 

Requirements

  • In addition to a normal PHP 5 Server you need the php-curl extension
    • If using a WAMP bundle php-curl was already installed
    • In Linux install php5-curl using your preferred package manager
    • Remember to restart your web server service after installing php-curl

 

 

Requirements

  • In addition to a normal Ruby install, you need the following gems
    • Sinatra (sudo gem install sinatra)
    • JSON/Pure (sudo gem install json_pure)
 

Requirements

  • In addition to a normal Ruby install, you need the following gems
    • Sinatra (sudo gem install sinatra)
    • JSON/Pure (sudo gem install json_pure
 

Requirements

To use this you will need to simply create an ASPX single file page and host it on a Windows machine with IIS. For more information on setting up IIS in Windows please see the IIS Installation Guide.

 

Requirements

This C# program does not use any third party dependencies and instead uses the HttpListener Class. This class can run on any Windows machine since Windows Server 2003 or Windows XP Service Pack 2. To use this program simply compile the Command Line application and run it as an Administrator in Command Prompt. To stop the program type STOP in the command prompt.

 

Requirements

This Java Servlet can be ran as a regular Servlet in any Java web server (like Tomcat or Glassfish). It can also be converted into a JSP file if you would prefer to use a JSP file instead of a Servlet.

 

Requirements

This Java Server application runs as a standalone Java application. Simply compile it (javac -g [name].java) and run it on your server (java [name]). When started it will simply state what port (defined in the code) it is using and you can then go to the page in any web browser by going to [serveraddress]:[port].

 

Client Side Setup

Most likely you will use the same web server to host your server side web application as you do for the client side files.  However, you can use any server for the server side web application and any server for your client side website; you can also use any CMS or markup.

The client side example is made up of three parts, the JavaScript, HTML markup, and CSS.  The CSS in the example is not important as it is just for the style of the page and you will use your own CSS in your product.  The HTML markup is also not that important and as long as you can easily target a few items with jQuery you can design it any way.  For example, we use a table for listing the files, however, you could use an unordered list or any other structure that allows you to iterate its content (including custom divs).

The example below uses Bootstrap for its design, however, this is not required and pure HTML or any framework can be used.  We have also includes some extra functions for creating a more 'user friendly' experience; like cleanSize and cleanDate which takes the raw information and turns it into a more friendly format (if you wish to use this in your code you may need to alter the output to match your locale. This example uses US English), we have also includes functions that allow you to sort by columns as well as search the content of the current directory; these are optional and can be removed if not desired.

To understand what the JavaScript does we have includes detailed comments above each function that explains its purpose.  We recommend reading over these functions to understand their purpose.  However, if you plan to use the code as is you should remove the comments before releasing to a live environment or minifying the file to help with performance.

To view the source for the JavaScript or HTML click the tabs below.  We have also includes a tab that contains the CSS, however, this has no affect on the use of the example it is just styling and is provided for copy and pasting purposes only.  It is important to note that the HTML is relatively basic and there are only a few areas that hold data from the JavaScript and must have proper IDs that match the JavaScript code.  Please see the comments in the HTML for more information.

 
 
 

 

Video player

Video

×